import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from "react-router-dom";
import { Layout, Card, Spin, Menu, Icon, Empty, Table, Tooltip, Divider, Button, Modal, Form, Input, Select, Popconfirm, message, Alert, List, Dropdown, Drawer, Tag, Switch as SwitchiOpen, Badge, Radio, Steps, Skeleton, Tree, Upload, Row, Col, Checkbox } from "antd";
import {
    allUserApi, addUserApi, deleteUserApi, updateUserApi, allSchoolApi, deleteSchoolAip, addSchoolApi, updateSchoolApi,
    allEduDepartmentApi, deleteEduDepartmentApi, addEduDepartmentApi, updateEduDepartmentApi, getInspectTypeApi, updateInspectTypeApi,
    importChildSchoolApi, addMultiSchools, addSchoolDefaultRoles, getAllUnRoleSchool, insertUuidApi
} from "../js/api.js";
import { listMenuByPermission } from "../js/api.js";
import {
    getAllFeaturesApi, addMainFeaturesApi, addChildFeaturesApi, updateChildFeaturesApi, deleteChildFeaturesApi, allDepartmentApi, getDepartmentRoleAndFeaturesApi, getRoleCanAddFeaturesApi,
    updateRoleFeaturesApi, deleteRoleApi, addRoleApi, SchoolAllApi, addInspectItemBySchoolIdApi, importPublicMemberListApi, getAllCallBackDeviceApi, addDeviceApi,
    deleteDeviceApi, updateDeviceApi, addZhiZhouItemBySchoolIdApi, addUserBySchoolIdApi, getLatelyInfoApi, getSchoolSystemGridInfoApi
} from "../js/api.js";

import {
    getSchoolInfoByNameApi, getChildrenSchoolInfoBySchoolIdApi
} from "../js/api.js";

import { getSchoolLevelByEduIdApi } from "../js/edudailystatistics.js";

import { getAllIdentity, getAllDepartment, afterDepartmentDataChange, screenUrl } from "../js/config.js";
import icon from "../img/icon.png";
import { SchoolManualManager } from "./schooladmin.jsx"

import { UrlPrefix, iconFontUrl } from "../js/config.js";
import iconPingmu from '../img/icon-pingmu.png';
import iconCard from '../img/icon-card.png';
import iconUp from '../img/icon-up.png';
import iconDown from '../img/icon-down.png';
// 引入 ECharts 主模块
// import echarts from 'echarts';
import * as echarts from 'echarts'
import { render } from "react-dom";
import { parseGeoJSON } from "echarts/core.js";
// import { float } from "html2canvas/dist/types/css/property-descriptors/float";
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: iconFontUrl,
});
const chartStyle = {
    width: "100%",
    height: "80%"
}
const { Meta } = Card;
const { Content, Footer, Sider, Header } = Layout;
const Step = Steps.Step;

var departmentName = sessionStorage.getItem('departmentName')
var sub = '/edubigscreen/' + parseInt(sessionStorage.getItem('departmentId')) + "/" + departmentName + '/';
//maptype 0 全市地图 1 区级地图

// let moduleString =  encodeURI(encodeURI(sessionStorage.getItem('arr') ))|| "巡更,巡检"
let moduleString = sessionStorage.getItem('arr') || "巡更,巡检"

var path = parseInt(sessionStorage.getItem('departmentId')) == 1 || parseInt(sessionStorage.getItem('departmentId')) == 0 ? sub + 0 + '' : sub + 1 + ''

//origin： app  后台安全网格大屏链接进入   edu  教育局大屏子地图进入
let origin = 'app'
var screenath = '/bigscreen/patrol/'
//var baseURL = 'https://tidukeji.cn'
//var baseURL = 'http://localhost:3000'
// + parseInt(sessionStorage.getItem('departmentId')) + "/" + departmentName + '/' + 1 + '/' + moduleString + '/' + origin

const info = () => {
    message.info('无查看权限', 0.2);
};

class EdudepartmentAdmin extends Component {
    constructor(props) {
        super(props);
        let url = document.location.href;
        let page = url.split("/")[5];
        let defaultSelectedKeys;
        switch (page) {
            case "user":
                defaultSelectedKeys = "user"; break;
            case "school":
                defaultSelectedKeys = "school"; break;
            case "edu":
                defaultSelectedKeys = "edu"; break;
            case "InspectCategory":
                defaultSelectedKeys = "InspectCategory"; break;
            case "schoolblueteeth":
                defaultSelectedKeys = "schoolblueteeth"; break;
            default: defaultSelectedKeys = "user";
        }
        this.state = {
            defaultSelectedKeys: [defaultSelectedKeys],
            collapsed: false,
            menuData: []
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        let departmentId = sessionStorage.getItem("departmentId");
        let identityId = sessionStorage.getItem("identityId");
        listMenuByPermission(departmentId, identityId)
            .then(res => {
                this.setState({
                    menuData: res.data
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    onCollapse = (collapsed) => {
        //console.log(collapsed);
        if (collapsed) {
            document.getElementById("logoName").style.display = "none";
        } else {
            document.getElementById("logoName").style.display = "inline";
        }
        this.setState({ collapsed });
    }

    logOff() {
        sessionStorage.setItem("username", null);
        sessionStorage.setItem("identityId", null);
        sessionStorage.setItem("departmentId", null);
        this.props.history.push("/");
    }

    render() {
        const menu = this.state.menuData.map(val => {
            const subMenu = val.subMenu.map(subVal => {
                return (
                    <Menu.Item key={subVal.key}>
                        <Link to={subVal.route}>
                            <IconFont type={subVal.icon} className='icon' />
                            <span className="nav-text">{subVal.name}</span>
                        </Link>
                    </Menu.Item>
                )
            });
            return (
                val.subMenu.length == 0 ?
                    (
                        <Menu.Item key={val.key}>
                            <Link to={val.route}>
                                <IconFont type={val.icon} className='icon' />
                                <span className="nav-text">{val.name}</span>
                            </Link>
                        </Menu.Item>
                    ) :
                    (
                        <SubMenu
                            key={val.key}
                            title={
                                <span>
                                    <IconFont type={val.icon} className='icon' />
                                    <span>{val.name}</span>
                                </span>
                            }>
                            {subMenu}
                        </SubMenu>
                    )
            );
        });
        return (
            <Router basename="/edudepartment/admin">
                <Layout>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                        width={256}
                        style={{
                            overflow: "auto",
                            height: "100vh",
                            left: 0
                        }}>
                        <div className="logo" >
                            {/* <IconFont type="icon-anfang" className='icon' style={{ verticalAlign: "middle", }} /> */}
                            <img src={icon} className='icon' style={{
                                verticalAlign: 'middle',
                                width: '30px',
                                height: '30px',
                                marginRight: '5px'
                            }} />
                            <div
                                id='logoName'
                                style={{ verticalAlign: 'middle', display: 'inline-block', paddingLeft: "5px" }}>
                                梯度智慧安监
                            </div>
                        </div>
                        <Menu theme="dark" mode="inline" defaultSelectedKeys={this.state.defaultSelectedKeys}>
                            {menu}
                        </Menu>
                    </Sider>
                    <Layout style={{ height: "100vh" }}>
                        <Header style={{
                            background: '#fcfcfc',
                            padding: 0,
                            fontFamily: 'Microsoft Yahei, sans-serif',
                            fontSize: 15,
                            position: 'relative',
                            height: '64px',
                            lineHeight: '64px',
                        }}>
                            <div style={{ position: "absolute", top: 0, bottom: 0, left: 24, }}>
                                欢迎您！您的身份为<span style={{ color: '#1890ff' }}>教育局管理员</span>
                            </div>
                            <div style={{ position: "absolute", top: 0, bottom: 0, right: 24, }}>
                                <Dropdown overlay={
                                    <Menu>
                                        <Menu.Item>
                                            <a
                                                class='logOff'
                                                style={{ color: '#333333', padding: '5px 15px' }}
                                                onClick={() => this.logOff()}>
                                                <IconFont
                                                    type="icon-zhuxiaologout11" className='icon'
                                                    style={{ fontSize: '14px', verticalAlign: 'middle' }} />
                                                <span style={{ verticalAlign: 'middle', marginLeft: '2px' }}>退出登录</span>
                                            </a>
                                        </Menu.Item>
                                    </Menu>
                                }>
                                    <div
                                        className='dropdown'
                                        style={{
                                            padding: '0px 5px'
                                        }}>
                                        <IconFont
                                            style={{ fontSize: '28px', verticalAlign: 'middle' }}
                                            type="icon-touxiang-shi" className='icon' />
                                        <span style={{ marginLeft: '2px' }}>{sessionStorage.getItem("username")}</span>
                                    </div>
                                </Dropdown>
                            </div>
                        </Header>
                        <Content style={{ margin: "24px", overflow: "initial" }}>
                            <div
                                id="right"
                                style={{
                                    padding: 24,
                                    background: "#fff",
                                    height: "auto",
                                    marginBottom: 24
                                }}
                            >
                                <Switch>
                                    <Route path="/user" component={EduDepartmentUserManager} />
                                    <Route path="/school" component={EduDepartmentSchoolManager} />
                                    <Route path="/edu" component={EduDepartmentEduManager} />
                                    <Route path="/InspectCategory" component={SchoolManualManager} />
                                    <Route path="/schoolblueteeth" component={EduSchoolblueteeth} />
                                    <Redirect path="/" to={{ pathname: '/user' }} />
                                </Switch>
                            </div>
                        </Content>
                        {/* <Footer style={{ textAlign: "center", background: '#fcfcfc', }}>绍兴市教育局</Footer> */}
                    </Layout>
                </Layout>
            </Router>
        );
    }
}

class EduDepartmentUserManager extends Component {
    constructor(props) {
        super(props);

        this.state = {
            addUserVisible: false, //控制新增用户模态框显示隐藏
            updateUserVisible: false, //控制修改用户信息模态框显示隐藏
            alertVisible: false, //提示用户名已存在
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            data: [],
            searchTextName: '',
            searchTextDepartment: '',
            filteredInfo: null,
            sortedInfo: null,
            allIdentity: [],
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        allUserApi(1, sessionStorage.getItem("departmentId"))
            .then((res) => {
                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        username: item.username,
                        name: item.realName,
                        phone: item.phone,
                        identity: item.identity,
                        department: item.department,
                        identityId: item.identityId,
                        departmentId: item.departmentId
                    });
                });
                this.setState({
                    data: columnData,
                    tableLoading: false
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        let allIdentity = [];
        getAllIdentity("教育局用户", parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                res.data.forEach((item, index) => {
                    allIdentity.push({
                        value: item.userType + "-" + item.identity,
                        text: item.userType + "-" + item.identity,
                    });
                });
                this.setState({
                    allIdentity: allIdentity
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    handleDelete(username) {
        deleteUserApi(username)
            .then((res) => {
                if (res.data == "success") {
                    message.success("删除成功!");
                    this.refreshData();
                }
                else {
                    message.error('删除失败,请稍后再试!');
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    showModal() {
        this.setState({
            addUserVisible: true
        });
    }

    //点击表格中 修改、重置密码 触发的操作
    updateHandleClick(username, type, name, phone, identityId, Identity, departmentId, department) {
        if (type == "update") {
            this.setState({
                modalTitle: "修改用户信息",
                modalType: "update",
                currentName: name,
                currentPhone: phone,
                currentIdentityId: parseInt(identityId),
                currentDepartmentId: parseInt(departmentId),
                currentDepartment: department,
                currentIdentity: Identity
            });
        } else if (type == "resetPSW") {
            this.setState({
                modalTitle: "重置密码",
                modalType: "resetPSW"
            });
        }
        this.setState({
            updateUserVisible: true,
            username: username,
        });
    }

    //新增用户 点击提交按钮后的操作
    addUserHandleClick() {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.addUserFormValue;
        val.validateFields((err, values) => {
            if (!err) {
                addUserApi(values)
                    .then((res) => {
                        if (res.data == "success") {
                            this.setState({
                                addUserVisible: false,
                                confirmLoading: false
                            });
                            this.refreshData();
                            val.resetFields();
                        } else if (res.data == "fail") {
                            this.setState({
                                alertVisible: true,
                                confirmLoading: false,
                                msg: "用户名已存在!"
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            } else {
                this.setState({
                    confirmLoading: false
                });
            }
        });
    }

    //修改用户信息 点击提交按钮后的操作
    updateUserHandleClick(username) {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.updateUserFormValue;
        val.validateFields((err, values) => {
            // console.log(err)
            if (!err) {
                if (values.password != values.repassword) {
                    this.setState({
                        alertVisible: true,
                        confirmLoading: false,
                        msg: "两次输入密码不一致,请重新输入!"
                    });
                } else if (values.password == "" || values.repassword == "") {
                    this.setState({
                        alertVisible: true,
                        confirmLoading: false,
                        msg: "密码不可为空,请重新输入!"
                    });
                } else {
                    updateUserApi(username, values)
                        .then((res) => {
                            if (res.data == "success") {
                                this.setState({
                                    updateUserVisible: false,
                                    confirmLoading: false
                                });
                                this.refreshData();
                                val.resetFields();
                            } else if (res.data == "fail") {
                                this.setState({
                                    alertVisible: true,
                                    updateUserVisible: true,
                                    confirmLoading: false,
                                    msg: "修改失败,请检查信息或稍后再试!"
                                });
                            }
                        })
                        .catch((e) => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data)
                                console.info(e.response.status)
                                console.info(e.response.headers)
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request)
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info('error', e.message)
                            }
                            console.info(e.config)
                        });
                }
            } else {
                this.setState({
                    confirmLoading: false
                });
            }
        });
    }

    //关闭 用户名已存在 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }

    //关闭模态框
    handleCancel(modal) {
        this.setState({
            alertVisible: false
        });
        if (modal == "addUser") {
            this.setState({
                addUserVisible: false
            });
        }
        if (modal == "updateUser") {
            this.setState({
                updateUserVisible: false
            });
        }
    }

    clearAll = () => {
        this.setState({
            filteredInfo: null,
            sortedInfo: null,
        });

    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        this.setState({
            searchTextName: selectedKeys[0],
            searchTextDepartment: selectedKeys[0]
        });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        this.setState({
            searchTextName: '',
            searchTextDepartment: '',
        });
    }


    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};

        const userColumns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "用户名",
                dataIndex: "username",
                key: "username"
            },
            {
                title: "姓名",
                dataIndex: "name",
                key: "name",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "联系电话",
                dataIndex: "phone",
                key: "phone"
            },
            {
                title: "单位",
                dataIndex: "department",
                key: "department",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.department.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "用户类型",
                dataIndex: "identity",
                key: "identity",
                filters: this.state.allIdentity,
                filteredValue: filteredInfo.identity || null,
                onFilter: (value, record) => record.identity.includes(value),
                filterIcon: filtered =>
                    <Icon
                        type="filter"
                        style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
            },
            {

                title: "操作详情",
                key: "action",
                render: (text, record) => (
                    <span>
                        <a href="javascript:;" onClick={this.updateHandleClick.bind(this,
                            record.username, "update", record.name, record.phone,
                            record.identityId, record.identity,
                            record.departmentId, record.department)}>修改</a>
                        <Divider type="vertical" />
                        <a href="javascript:;" onClick={this.updateHandleClick.bind(this,
                            record.username, "resetPSW", record.name, record.phone,
                            record.identityId, record.identity,
                            record.departmentId, record.department)}>重置密码</a>
                        <Divider type="vertical" />
                        <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => this.handleDelete(record.username)}>
                            <a href="#">删除</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];
        return (
            <div>
                <div style={{ marginBottom: 16 }}>
                    <Button type="primary" onClick={this.showModal.bind(this)} size="large">
                        <Icon type="user-add" />新增用户
                    </Button>
                    <Button style={{ marginLeft: '20px' }} onClick={this.clearAll}>
                        <Icon type="delete" theme="outlined" />清除筛选</Button>
                    {
                        this.state.addUserVisible ? (
                            <Modal
                                title="新增用户"
                                visible={this.state.addUserVisible}
                                onCancel={this.handleCancel.bind(this, "addUser")}
                                closable
                                footer={[
                                    <Button key="submit" type="primary" size="large" loading={this.state.confirmLoading} onClick={this.addUserHandleClick.bind(this)}>提交</Button>
                                ]}
                            >
                                <AddUserForm ref="addUserFormValue" />
                                {
                                    this.state.alertVisible ?
                                        (
                                            <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                        ) : null
                                }
                            </Modal>) : null
                    }
                    {
                        this.state.updateUserVisible ? (
                            <Modal
                                title={this.state.modalTitle}
                                visible={this.state.updateUserVisible}
                                onCancel={this.handleCancel.bind(this, "updateUser")}
                                closable
                                footer={[
                                    <Button
                                        key="submit"
                                        type="primary"
                                        size="large"
                                        loading={this.state.confirmLoading}
                                        onClick={this.updateUserHandleClick.bind(this, this.state.username)}>
                                        提交
                                    </Button>
                                ]}
                            >
                                {
                                    (this.state.modalType == "resetPSW") ?
                                        (<ResetPSWForm ref="updateUserFormValue" type={this.state.modalType} />) :
                                        (<UpdateUserForm ref="updateUserFormValue" type={this.state.modalType}
                                            currentName={this.state.currentName}
                                            currentPhone={this.state.currentPhone}
                                            currentIdentityId={this.state.currentIdentityId}
                                            currentIdentity={this.state.currentIdentity}
                                            currentDepartmentId={this.state.currentDepartmentId}
                                            currentDepartment={this.state.currentDepartment} />)
                                }
                                {
                                    this.state.alertVisible ?
                                        (
                                            <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                        ) : null
                                }
                            </Modal>) : null
                    }
                </div>
                <Table
                    dataSource={this.state.data}
                    columns={userColumns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    onChange={this.handleChange}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        );
    }
}

const FormItem = Form.Item;
const Option = Select.Option;
class addUserForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allDepartment: [],
            allIdentity: [],
            currentDepartmentId: ''
        };
    }

    componentDidMount() {
        let allIdentity = [];
        getAllIdentity("教育局用户", parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                res.data.forEach((item, index) => {
                    allIdentity.push({
                        value: item.id,
                        text: item.userType + "-" + item.identity
                    });
                });
                this.setState({
                    allIdentity: allIdentity
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    handleSelectOnChange = (value, options) => {
        let userType = options.props.children.split('-')[0];
        let allDepartment = [];
        getAllDepartment(userType)
            .then((res) => {
                res.data.forEach((item, index) => {
                    allDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allDepartment: allDepartment,
                    currentDepartmentId: allDepartment[0].value
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        message.warning('请注意更换单位！');
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const departmentOptions = this.state.allDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const allIdentityOptions = this.state.allIdentity.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        return (
            <Form>
                <FormItem
                    label='用户名'
                    {...formItemLayout}>
                    {getFieldDecorator("userName", {
                        rules: [{ required: true, message: "请输入用户名!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="用户名"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='密码'
                    {...formItemLayout}>
                    {getFieldDecorator("password", {
                        rules: [{ required: true, message: "请输入密码!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            type="password"
                            placeholder="密码"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='真实姓名'
                    {...formItemLayout}>
                    {getFieldDecorator("realName", {
                        rules: [{ required: true, message: "请输入真实姓名!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="idcard" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="真实姓名"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='联系电话'
                    {...formItemLayout}>
                    {getFieldDecorator("phone", {
                        rules: [{ required: true, message: "请输入联系电话!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="mobile" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="联系电话"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='用户类型'
                    {...formItemLayout}>
                    {getFieldDecorator("identity", {
                        rules: [{ required: true, message: "请选择用户类型!" }]
                    })(
                        <Select size="large" placeholder="用户类型" onChange={this.handleSelectOnChange.bind(this)}>
                            {allIdentityOptions}
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    label='单位'
                    {...formItemLayout}>
                    {getFieldDecorator("department", {
                        //initialValue: this.state.currentDepartmentId,
                        rules: [{ required: true, message: "请选择单位!" }]
                    })(
                        <Select
                            size="large"
                            placeholder="单位"
                            notFoundContent="请先选择用户单位!">
                            {departmentOptions}
                        </Select>
                    )}
                </FormItem>
            </Form>
        );
    }
}
const AddUserForm = Form.create()(addUserForm);

class updateUserForm extends Component {
    constructor(props) {
        super(props);

        console.log("updateUserForm==this.props=============", this.props)
        if (this.props.type == "update") {
            this.state = {
                allDepartment: [],
                allIdentity: [],
                update: "",
                resetPSW: "none",
                currentName: props.currentName,
                currentPhone: props.currentPhone,
                currentIdentityId: props.currentIdentityId,
                currentDepartmentId: props.currentDepartmentId,
                currentDepartment: props.currentDepartment,
                currentIdentity: props.currentIdentity
            };
        } else if (this.props.type == "resetPSW") {
            this.state = {
                allDepartment: [],
                allIdentity: [],
                update: "none",
                resetPSW: ""
            };
        }



    }

    componentDidMount() {
        let allIdentity = [];
        getAllIdentity("教育局用户", parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                res.data.forEach((item, index) => {
                    allIdentity.push({
                        value: item.id,
                        text: item.userType + "-" + item.identity
                    });
                });
                this.setState({
                    allIdentity: allIdentity
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        // let userType = this.state.currentIdentity.split('-')[0];
        // let allDepartment = [];
        // getAllDepartment(userType)
        //     .then((res) => {
        //         res.data.forEach((item, index) => {
        //             allDepartment.push({
        //                 value: item.id,
        //                 text: item.name
        //             });
        //         });
        //         this.setState({
        //             allDepartment: allDepartment
        //         });
        //     })
        //     .catch((e) => {
        //         if (e.response) {
        //             //请求已发出，服务器返回状态码不是2xx。
        //             console.info(e.response.data)
        //             console.info(e.response.status)
        //             console.info(e.response.headers)
        //         } else if (e.request) {
        //             // 请求已发出，但没有收到响应
        //             // e.request 在浏览器里是一个XMLHttpRequest实例，
        //             // 在node中是一个http.ClientRequest实例
        //             console.info(e.request)
        //         } else {
        //             //发送请求时异常，捕捉到错误
        //             console.info('error', e.message)
        //         }
        //         console.info(e.config)
        //     });
    }

    handleSelectOnChange(value, options) {
        let userType = options.props.children.split('-')[0];
        let allDepartment = [];
        getAllDepartment(userType)
            .then((res) => {
                res.data.forEach((item, index) => {
                    allDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allDepartment: allDepartment,
                    currentDepartmentId: allDepartment[0].value
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        message.warning('请注意更换单位！');

    }

    render() {
        const { getFieldDecorator } = this.props.form;

        const allIdentityOptions = this.state.allIdentity.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const departmentOptions = this.state.allDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };

        return (
            <Form>
                <div style={{ display: this.state.resetPSW }}>
                    <FormItem
                        label='新密码'
                        {...formItemLayout}>
                        {getFieldDecorator("password")(
                            <Input
                                size="large"
                                prefix={
                                    <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                                }
                                type="password"
                                placeholder="请输入新密码"
                            />
                        )}
                    </FormItem>
                    <FormItem
                        label='重复密码'
                        {...formItemLayout}>
                        {getFieldDecorator("repassword")(
                            <Input
                                size="large"
                                prefix={
                                    <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                                }
                                type="password"
                                placeholder="请重复密码"
                            />
                        )}
                    </FormItem>
                </div>
                <div style={{ display: this.state.update }}>
                    <FormItem
                        label='真实姓名'
                        {...formItemLayout}>
                        {getFieldDecorator("realName")(
                            <Input
                                size="large"
                                prefix={
                                    <Icon type="idcard" style={{ color: "rgba(0,0,0,.25)" }} />
                                }
                                placeholder="请输入真实姓名"
                            />
                        )}
                    </FormItem>
                    <FormItem
                        label='联系电话'
                        {...formItemLayout}>
                        {getFieldDecorator("phone")(
                            <Input
                                size="large"
                                prefix={
                                    <Icon type="mobile" style={{ color: "rgba(0,0,0,.25)" }} />
                                }
                                placeholder="请输入联系电话"
                            />
                        )}
                    </FormItem>
                    <FormItem
                        label='用户类型'
                        {...formItemLayout}>
                        {getFieldDecorator("identity")(
                            <Select
                                size="large"
                                placeholder="请选择用户类型"
                                onChange={this.handleSelectOnChange.bind(this)}>
                                {allIdentityOptions}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem
                        label='单位'
                        {...formItemLayout}>
                        {getFieldDecorator("department")(
                            <Select
                                size="large"
                                placeholder="单位"
                                notFoundContent="请先选择用户单位!">
                                {departmentOptions}
                            </Select>
                        )}
                    </FormItem>
                </div>
            </Form>
        );
    }
}
const UpdateUserForm = Form.create()(updateUserForm);
const ResetPSWForm = Form.create()(updateUserForm);

class EduDepartmentSchoolManager extends Component {
    constructor(props) {
        super(props);
        this.userColumns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "学校名称",
                dataIndex: "schoolname",
                key: "schoolname",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.schoolname.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "监管单位",
                dataIndex: "parentName",
                key: "parentName"
            },
            {
                title: "地址",
                dataIndex: "address",
                key: "address",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.address.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "操作详情",
                key: "action",
                render: (text, record) => (
                    <span>
                        <a href="javascript:;" onClick={this.updateHandleClick.bind(this,
                            record.schoolname, record.address)}>修改</a>
                        <Divider type="vertical" />
                        <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => this.handleDelete(record.schoolname)}>
                            <a href="#">删除</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];
        this.state = {
            addVisible: false, //控制新增模态框显示隐藏
            updateVisible: false, //控制修改信息模态框显示隐藏
            alertVisible: false, //提示school已存在
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            data: [],
            searchTextSchoolname: '',
            searchTextAddress: '',
            exportSchoolVisible: false,
            exportRoleVisible: false,
            unRoleSchoolList: []
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true,
            exportSchoolVisible: false,
            exportRoleVisible: false
        });
        let columnData = [];
        allSchoolApi()
            .then((res) => {
                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        schoolname: item.name,
                        address: item.address,
                        id: item.id,
                        name: item.name,
                        parentName: item.parentName
                    });
                });
                this.setState({
                    data: columnData,
                    tableLoading: false
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    handleDelete(schoolname) {
        deleteSchoolAip(schoolname)
            .then((res) => {
                if (res.data == "success") {
                    message.success("删除成功!");
                    this.refreshData();
                    afterDepartmentDataChange("school");
                } else {
                    message.error('删除失败,请稍后再试!');
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    showModal() {
        this.setState({
            addVisible: true,
            exportSchoolVisible: false,
            exportRoleVisible: false
        });
    }

    //点击表格中 修改 触发的操作
    updateHandleClick(schoolname, address) {
        this.setState({
            modalTitle: "修改学校信息",
            updateVisible: true,
            schoolname: schoolname,
            currentSchoolname: schoolname,
            currentAddress: address,
            exportSchoolVisible: false,
            exportRoleVisible: false
        });
    }

    //新增学校 点击提交按钮后的操作
    addSchoolHandleClick() {
        this.setState({
            confirmLoading: true,
            exportSchoolVisible: false,
            exportRoleVisible: false,
        });
        let val = this.refs.addSchoolFormValue;
        val.validateFields((err, values) => {
            if (!err) {
                addSchoolApi(values)
                    .then((res) => {
                        if (res.data == "success") {
                            this.setState({
                                addVisible: false,
                                confirmLoading: false
                            });
                            this.refreshData();
                            afterDepartmentDataChange("school");
                            val.resetFields();
                            message.success("添加成功!")
                        } else if (res.data == "repeat") {
                            this.setState({
                                alertVisible: true,
                                confirmLoading: false,
                                msg: "学校已存在!"
                            });
                            message.error("添加失败!")
                        } else if (res.data == "fail1") {
                            this.setState({
                                alertVisible: true,
                                confirmLoading: false,
                                msg: "新增失败!"
                            });
                            message.error("添加失败!")
                        } else if (res.data == "fail2") {
                            this.setState({
                                alertVisible: true,
                                confirmLoading: false,
                                msg: "500服务错误"
                            });
                            message.error("添加失败!")
                        }

                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            } else {
                this.setState({
                    confirmLoading: false
                });
            }
        });
    }

    //修改学校信息 点击提交按钮后的操作
    updateSchoolHandleClick(schoolname) {
        this.setState({
            confirmLoading: true,
            exportSchoolVisible: false,
            exportRoleVisible: false
        });
        let val = this.refs.updateSchoolFormValue;
        val.validateFields((err, values) => {
            if (!err) {
                updateSchoolApi(schoolname, values)
                    .then((res) => {
                        if (res.data == "success") {
                            this.setState({
                                updateVisible: false,
                                confirmLoading: false
                            });
                            this.refreshData();
                            val.resetFields();
                        } else if (res.data == "fail") {
                            this.setState({
                                alertVisible: true,
                                updateVisible: true,
                                confirmLoading: false,
                                msg: "修改失败,请检查信息或稍后再试!"
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            } else {
                this.setState({
                    confirmLoading: false,
                    exportRoleVisible: false,
                    exportSchoolVisible: false
                });
            }
        });
    }

    //关闭 学校名已存在 的提示
    handleClose() {
        this.setState({ alertVisible: false, exportSchoolVisible: false, exportRoleVisible: false, confirmLoading: false });
    }

    //关闭模态框
    handleCancel(modal) {
        this.setState({
            alertVisible: false,
            exportSchoolVisible: false,
            exportRoleVisible: false
        });
        if (modal == "add") {
            this.setState({
                addVisible: false,
                exportSchoolVisible: false,
                exportRoleVisible: false
            });
        }
        if (modal == "update") {
            this.setState({
                updateVisible: false,
                exportSchoolVisible: false,
                exportRoleVisible: false
            });
        }
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        this.setState({
            searchTextSchoolname: selectedKeys[0],
            searchTextAddress: selectedKeys[0],
            exportRoleVisible: false,
            exportSchoolVisible: false
        });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        this.setState({
            searchTextSchoolname: '',
            searchTextAddress: '',
            exportRoleVisible: false,
            exportSchoolVisible: false
        });
    }

    //新增学校导入
    showSchoolModel = () => {
        this.setState({
            exportSchoolVisible: true,
            exportRoleVisible: false
        })
    }
    //新增角色分配
    showRoleModel = () => {
        this.setState({
            exportRoleVisible: true,
            exportSchoolVisible: false
        })
        let unRoleSchoolList = []
        //获取所有未分配角色的学校
        getAllUnRoleSchool().then((res) => {
            if (res.data.msg == "success") {
                res.data.schoolIdAndNameList.forEach((item, index) => {
                    unRoleSchoolList.push({
                        title: item.department,
                        key: item.id
                    })
                })
                this.setState({
                    unRoleSchoolList: unRoleSchoolList
                })
            } else if (res.data.msg == "fail") {
                this.setState({
                    unRoleSchoolList: []
                })
            }
        })
    }

    //子组件调用父组件方法刷新数据
    getAllSchool = (data) => {
        console.log("刷新数据", data)
        this.setState({
            data: data,
            exportSchoolVisible: false,
            exportRoleVisible: false
        });
    }



    render() {
        return (
            <div>
                <div style={{ marginBottom: 16 }}>
                    <Button type="primary" onClick={this.showModal.bind(this)} size="large">
                        <Icon type="user-add" />新增学校
                    </Button>
                    {
                        this.state.addVisible ? (
                            <Modal
                                title="新增学校"
                                visible={this.state.addVisible}
                                onCancel={this.handleCancel.bind(this, "add")}
                                closable
                                footer={[

                                    <Button key="submit" type="primary" size="large" loading={this.state.confirmLoading} onClick={this.addSchoolHandleClick.bind(this)}>提交</Button>
                                ]}
                            >
                                <AddSchoolForm ref="addSchoolFormValue" />
                                {
                                    this.state.alertVisible ?
                                        (
                                            <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                        ) : null
                                }
                            </Modal>) : null
                    }
                    {
                        this.state.updateVisible ? (
                            <Modal
                                title={this.state.modalTitle}
                                visible={this.state.updateVisible}
                                onCancel={this.handleCancel.bind(this, "update")}
                                closable
                                footer={[
                                    <Button key="submit" type="primary" size="large" loading={this.state.confirmLoading} onClick={this.updateSchoolHandleClick.bind(this, this.state.schoolname)}>提交</Button>
                                ]}
                            >
                                <UpdateSchoolForm ref="updateSchoolFormValue"
                                    currentSchoolname={this.state.currentSchoolname}
                                    currentAddress={this.state.currentAddress} />

                                {
                                    this.state.alertVisible ?
                                        (
                                            <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                        ) : null
                                }
                            </Modal>) : null
                    }
                    <Button type="primary" onClick={this.showSchoolModel} size="large" style={{ marginLeft: 15 }}>
                        <Icon type="plus" />学校导入
                    </Button>
                    <ExportSchoolForm ref="exportSchoolForm" visible={this.state.exportSchoolVisible} getAllSchool={this.getAllSchool} />
                    <Button type="primary" size="large" onClick={this.showRoleModel} style={{ marginLeft: 15 }}>
                        <Icon type="plus" />角色分配
                    </Button>
                    <ExportRoleForm ref="exportRoleForm" visible={this.state.exportRoleVisible} unRoleSchoolList={this.state.unRoleSchoolList} />
                </div>
                <Table
                    dataSource={this.state.data}
                    columns={this.userColumns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    expandedRowRender={(record) => {
                        return (
                            <AllRoleInnerTable
                                departmentId={record.id}
                                departmentName={record.name}
                                //wrappedComponentRef={(inst) => this.teammateTableFormRef = inst}
                                //ref="teammateTableRefresh"
                                onRef={this.onRef}

                                that={this} />)
                    }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        );
    }
}
class exportRoleForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: props.visible,
            unRoleSchoolList: props.visible,
            confirmLoading: false,
            treeData: [],
            checkedKeys: [],
            expandedKeys: [],
            alertVisible: false,
            msg: "",
            schoolIdList: [],
            schoolIdAndNameList: [],
            currentStep: 0,
        };
    }
    componentDidMount() {

    }
    componentWillReceiveProps(props) {
        this.setState({
            visible: props.visible,
            unRoleSchoolList: props.unRoleSchoolList,
        });
    }
    handleCancel = () => {
        this.setState({
            visible: false,
            alertVisible: false,
            confirmLoading: false,
            currentStep: 0,
            msg: '',
            schoolIdList: []
        })
        console.log("------关闭")
    }
    handleClose = () => {
        this.setState({
            alertVisible: false,
            msg: '',
        })
    }
    onCheck = (checkedKeys, event) => {
        console.log('event', event);
        let schoolIdAndNameList = []
        let schoolIdList = []
        checkedKeys.forEach((item, index) => {
            if (item != '0') {
                schoolIdList.push(item)
            }
        })
        checkedKeys.forEach((item, index) => {
            if (event.checkedNodes[index].props.key != '0' && item != '0') {
                schoolIdAndNameList.push({
                    key: item,
                    title: event.checkedNodes[index].props.title
                })
            }
        })
        console.log('schoolIdAndNameList', schoolIdAndNameList);
        this.setState({
            schoolIdAndNameList: schoolIdAndNameList,
            schoolIdList: schoolIdList
        })
    }
    handleSubmit = () => {
        this.setState({
            confirmLoading: true
        })
        console.log("-----提交")
        this.state.schoolIdList.forEach((item, index)=>{
            insertUuidApi(item).then(res => {
                    if (res.data == 'success') {
                        this.props.submitmodal(false)
                        this.props.refresh()
                        this.props.form.resetFields()
                        
                    }
                    else if (res.data == 'fail2') {
                       
                    } else {
                        
                    }
                }
            )
        })
        addSchoolDefaultRoles(this.state.schoolIdAndNameList).then((res) => {
            console.log(res.data)
            if (res.data.msg == "success") {
                this.setState({
                    currentStep: 1,
                    confirmLoading: false
                })
                message.success("分配成功!")
                //刷新
                let unRoleSchoolList = []
                getAllUnRoleSchool().then((res) => {
                    if (res.data.msg == "success") {
                        res.data.schoolIdAndNameList.forEach((item, index) => {
                            unRoleSchoolList.push({
                                title: item.department,
                                key: item.id
                            })
                        })
                        this.setState({
                            unRoleSchoolList: unRoleSchoolList
                        })
                    } else if (res.data.msg == "fail") {
                        this.setState({
                            unRoleSchoolList: []
                        })
                    }
                })
            } else if (res.data.msg == "fail1") {
                this.setState({
                    currentStep: 0,
                    confirmLoading: false,
                    alertVisible: true,
                    msg: "分配失败!"
                })
                message.error("分配失败!")
            } else if (res.data.msg == "fail2") {
                this.setState({
                    currentStep: 0,
                    confirmLoading: false,
                    alertVisible: true,
                    msg: "500服务出错!"
                })
                message.error("分配失败!")
            }
        })

    }
    render() {
        const treeData = [
            {
                title: '未分配角色的学校',
                key: '0',
                children: this.state.unRoleSchoolList
            }
        ]
        let stepRole = (
            <Steps
                current={this.state.currentStep}
                style={{
                    marginBottom: 30,
                }}>
                <Step title="分配学校角色" description="请分配并提交" />
                <Step title="完成" />
            </Steps>
        );
        let drawerContent;
        let footerButton;
        if (this.state.currentStep == 0) {
            drawerContent = (
                <div>
                    <Tree
                        checkable
                        selectable={true}
                        onCheck={this.onCheck}
                        checkedKeys={this.state.schoolIdList}
                        treeData={treeData}
                    />
                </div>
            )
            footerButton = (
                <div>
                    <Button size="large" onClick={this.handleCancel.bind(this)}
                        style={{ marginRight: 20 }}>关闭</Button>
                    <Button size="large" onClick={this.handleSubmit.bind(this)}
                        style={{ marginRight: 20 }} disabled={this.state.unRoleSchoolList.length == 0}>提交</Button>
                </div>
            )
        } else if (this.state.currentStep == 1) {
            drawerContent = (
                <div>
                    <div style={{
                        textAlign: 'center',
                        width: '100%',
                        marginTop: 200,
                    }}>
                        <IconFont type='icon-locationiconsuccess' style={{ fontSize: '10em' }} />
                        <div style={{ fontSize: 20 }}>操作成功</div>
                    </div>
                </div>
            )
            footerButton = (
                <div>
                    <Button size="large" onClick={this.handleCancel.bind(this)}
                        style={{ marginRight: 20 }}>关闭</Button>
                </div>
            )
        }

        return (
            <Drawer
                bodyStyle={{ paddingBottom: 100, paddingRight: 50 }}
                width={600}
                title={'批量分配学校信息'}
                visible={this.state.visible}
                onClose={this.handleCancel.bind(this)}
                destroyOnClose={true}
                closable
            >
                <Skeleton loading={this.state.confirmLoading} active>
                    {stepRole}
                    {
                        this.state.alertVisible ?
                            (
                                <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                            ) : null
                    }
                    {drawerContent}
                </Skeleton>
                <div
                    style={{
                        position: 'absolute',
                        left: 0,
                        bottom: 0,
                        width: '100%',
                        borderTop: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'right',
                    }}
                >
                    {footerButton}
                </div>
            </Drawer>
        )
    }
}
const ExportRoleForm = Form.create()(exportRoleForm)

class exportSchoolForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: props.visible,
            confirmLoading: false,
            alertVisible: false,
            msg: "",
            fileList: [],
            uploading: false,
            isExport: false,
            allEduDepartment: [],
            schoolIdAndNameList: []
        };
    }
    componentDidMount() {
        allEduDepartmentApi()
            .then((res) => {
                let allEduDepartment = [];
                res.data.forEach((item, index) => {
                    allEduDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allEduDepartment: allEduDepartment
                });
            })
    }
    componentWillReceiveProps(props) {
        this.setState({
            visible: props.visible,
        });
    }
    handleCancel = () => {
        this.setState({
            visible: false,
            // currentStep: 0,
            fileList: [],
            isExport: false,
            uploading: false,
            msg: ''
        })
        //新增学校后刷新
        let columnData = [];
        allSchoolApi()
            .then((res) => {
                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        schoolname: item.name,
                        address: item.address,
                        id: item.id,
                        name: item.name,
                        parentName: item.parentName
                    });
                });
                this.props.getAllSchool(columnData);
            })
    }
    handleUpload = () => {
        const { fileList } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('upfile', file);
        });
        this.setState({
            isExport: false,
            uploading: true,
            msg: ''
        });
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log("----监管单位", values.department)
                formData.append('parent', values.department)
                addMultiSchools(formData).then((res) => {
                    console.log("upload", res.data)
                    if (res.data.msg == "success") {
                        this.setState({
                            uploading: false,
                            fileList: [],
                            isExport: true,
                            msg: "导入成功!"
                        });
                        message.success("导入成功!");
                    } else if (res.data.msg == "fail1") {
                        this.setState({
                            uploading: false,
                            fileList: [],
                            isExport: true,
                            msg: "500服务出错!"
                        });
                        message.error("导入失败!");
                    } else if (res.data.msg == "fail2") {
                        this.setState({
                            uploading: false,
                            fileList: [],
                            isExport: true,
                            msg: "文件为空或者文件不规范!"
                        });
                        message.error("导入失败!");
                    } else if (res.data.msg == "repeat") {
                        this.setState({
                            uploading: false,
                            fileList: [],
                            isExport: true,
                            msg: "学校已存在,请勿重新导入!"
                        });
                        message.error("导入失败!");
                    }
                })
            } else {
                this.setState({
                    uploading: false
                })
            }
        })
    };
    onCheck = (checkedKeys) => {
        console.log("checkedKeys", checkedKeys)
    }
    render() {
        const { uploading, fileList } = this.state;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
            fileList,
        };
        const { getFieldDecorator, getFieldValue } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        const allEduDepartmentOptions = this.state.allEduDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        let drawerContent;
        let footerButton;
        drawerContent = (
            <div>
                <Form>
                    <FormItem
                        label='监管单位'
                        {...formItemLayout}>
                        {getFieldDecorator("department", {
                            rules: [{
                                required: true,
                                message: "请选择监管单位!"
                            }]
                        })(
                            <Select
                                size="middle"
                                placeholder="请选择监管单位">
                                {allEduDepartmentOptions}
                            </Select>
                        )}
                    </FormItem>
                    <Form>
                        <div style={{ marginLeft: 90 }}>
                            <div style={{ color: 'gray' }}>
                                请选择需要导入的学校
                            </div>
                            <Upload {...props}>
                                <Button type="primary" style={{ marginTop: 15 }}>选择文件</Button>
                            </Upload>
                            <Button
                                type="primary"
                                onClick={this.handleUpload}
                                disabled={fileList.length === 0}
                                loading={uploading}
                                style={{ marginTop: 20 }}
                            >
                                {uploading ? '正在导入' : '导入学校'}
                            </Button>
                            <div style={{ color: 'red', marginTop: 20, fontSize: 16 }}>
                                {this.state.isExport ? this.state.msg : ''}
                            </div>
                        </div>
                    </Form>
                </Form>
            </div>
        )
        footerButton = (
            <div>
                <Button size="large" onClick={this.handleCancel.bind(this)}
                    style={{ marginRight: 20 }}>关闭</Button>
            </div>
        )
        return (
            <Drawer
                bodyStyle={{ paddingBottom: 100, paddingRight: 50 }}
                width={600}
                title={'批量导入学校信息'}
                visible={this.state.visible}
                onClose={this.handleCancel.bind(this)}
                destroyOnClose={true}
                closable
            >
                <Skeleton loading={this.state.confirmLoading} active>
                    {/* {stepSchool} */}
                    {drawerContent}
                </Skeleton>
                <div
                    style={{
                        position: 'absolute',
                        left: 0,
                        bottom: 0,
                        width: '100%',
                        borderTop: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'right',
                    }}
                >
                    {footerButton}
                </div>
            </Drawer>
        )
    }
}
const ExportSchoolForm = Form.create()(exportSchoolForm);

class AllRoleTable extends Component {
    constructor(props) {
        super(props);
        const innerColumns = [{
            title: '用户名',
            dataIndex: 'username',
            key: 'userName',
            width: '30%',
        }, {
            title: '真实姓名',
            dataIndex: 'realname',
            key: 'realName',
            width: '20%',
            filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                <div className="custom-filter-dropdown">
                    <Input
                        ref={ele => this.searchInput = ele}
                        value={selectedKeys[0]}
                        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                        onPressEnter={this.handleSearch(selectedKeys, confirm)}
                    />
                    <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                    <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                </div>
            ),
            filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
            onFilter: (value, record) => record.realname.toLowerCase().includes(value.toLowerCase()),
            onFilterDropdownVisibleChange: (visible) => {
                if (visible) {
                    setTimeout(() => {
                        this.searchInput.focus();
                    });
                }
            }
        }, {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
            width: '30%',
        },
        {
            title: "操作详情",
            key: "action",
            width: '20%',
            render: (text, record) => (
                <span>
                    {
                        record.key == 1 ?
                            (<span>★负责人★&nbsp;</span>) : (
                                <Popconfirm title="确定升为负责人？将顶替原有负责人。" okText="确定" cancelText="取消"
                                    onConfirm={() => this.handleSetChargeMan(props.teamId, record.id)}>
                                    <a href="#">升为负责人</a>
                                </Popconfirm>
                            )
                    }
                    <Divider type="vertical" />
                    <Popconfirm title="确定删除？" okText="确定" cancelText="取消"
                        onConfirm={() => this.handleDeleteTeammate(props.teamId, record.id)}>
                        <a href="#">删除</a>
                    </Popconfirm>
                </span>
            )
        }];
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            // searchText: '',
            tableLoading: true,
            teamId: props.teamId,
            innerColumns: innerColumns,
            that: props.that
        }
    }

    componentDidMount() {
        this.refreshData();
        this.props.onRef(this);
    }

    componentWillReceiveProps(props) {
        this.setState({
            teamId: props.teamId,
            that: props.that,
        });
        // this.refreshData();
    }



    handleDeleteTeammate(teamId, userId) {

    }

    handleSetChargeMan(teamId, userId) {

    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        // this.setState({ searchText: selectedKeys[0] });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        // this.setState({ searchText: '' });
    }

    render() {
        return (
            <Table
                columns={this.state.innerColumns}
                dataSource={this.state.innerData}
                pagination={false}
                size='small'
                loading={this.state.tableLoading}
                locale={{ emptyText: '暂无数据' }}
                bordered={true}
                rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
            />
        )
    }
}


class addSchoolForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allEduDepartment: []
        };
    }
    componentDidMount() {
        allEduDepartmentApi()
            .then((res) => {
                let allEduDepartment = [];
                res.data.forEach((item, index) => {
                    allEduDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allEduDepartment: allEduDepartment
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const allEduDepartmentOptions = this.state.allEduDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        return (


            <Form>
                <FormItem
                    label='学校名称'
                    {...formItemLayout}>
                    {getFieldDecorator("schoolname", {
                        rules: [{ required: true, message: "请输入学校名称!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="请输入学校名称"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='地址'
                    {...formItemLayout}>
                    {getFieldDecorator("address", {
                        rules: [{ required: true, message: "请输入地址!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="home" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="请输入地址"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='监管单位'
                    {...formItemLayout}>
                    {getFieldDecorator("department", {
                        rules: [{
                            required: true,
                            message: "请选择监管单位!"
                        }]
                    })(
                        <Select
                            size="large"
                            placeholder="请选择监管单位">
                            {allEduDepartmentOptions}
                        </Select>
                    )}
                </FormItem>

                <div style={{ marginLeft: "30px", textAlign: "left" }}><Tag color="#2db7f5">创建初始系统管理员</Tag></div>
            </Form>
        );
    }
}
const AddSchoolForm = Form.create()(addSchoolForm);

class updateSchoolForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            currentSchoolname: props.currentSchoolname,
            currentAddress: props.currentAddress,
            allEduDepartment: []
        };
    }

    componentDidMount() {
        allEduDepartmentApi()
            .then((res) => {
                let allEduDepartment = [];
                res.data.forEach((item, index) => {
                    allEduDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allEduDepartment: allEduDepartment
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const allEduDepartmentOptions = this.state.allEduDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        return (
            <Form>
                <FormItem
                    label='学校名称'
                    {...formItemLayout}>
                    {getFieldDecorator("schoolname", {
                        // initialValue: this.state.currentSchoolname
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="请输入学校名称"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='地址'
                    {...formItemLayout}>
                    {getFieldDecorator("address", {
                        // initialValue: this.state.currentAddress
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="home" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="请输入地址"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='监管单位'
                    {...formItemLayout}>
                    {getFieldDecorator("department")(
                        <Select
                            size="large"
                            placeholder="请选择监管单位">
                            {allEduDepartmentOptions}
                        </Select>
                    )}
                </FormItem>
            </Form>
        );
    }
}
const UpdateSchoolForm = Form.create()(updateSchoolForm);

class EduDepartmentEduManager extends Component {
    constructor(props) {
        super(props);
        this.userColumns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "教育局名称",
                dataIndex: "edudepartmentname",
                key: "edudepartmentname",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.edudepartmentname.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "地址",
                dataIndex: "address",
                key: "address",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.address.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {

                title: "操作详情",
                key: "action",
                render: (text, record) => (
                    <span>
                        <a href="javascript:;" onClick={this.updateHandleClick.bind(this,
                            record.edudepartmentname, record.address)}>修改</a>
                        <Divider type="vertical" />
                        <Popconfirm title="确定删除？" okText="确定" cancelText="取消" onConfirm={() => this.handleDelete(record.edudepartmentname)}>
                            <a href="#">删除</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];
        this.state = {
            addVisible: false, //控制新增模态框显示隐藏
            updateVisible: false, //控制修改信息模态框显示隐藏
            alertVisible: false, //提示 已存在
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            data: [],
            searchTextEdudepartment: '',
            searchTextAddress: '',
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    handleDelete(edudepartmentname) {
        deleteEduDepartmentApi(edudepartmentname)
            .then((res) => {
                if (res.data == "success") {
                    message.success("删除成功!");
                    this.refreshData();
                    afterDepartmentDataChange("edudepartment");
                } else {
                    message.error('删除失败,请稍后再试!');
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        allEduDepartmentApi()
            .then((res) => {
                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        id: item.id,
                        name: item.name,
                        edudepartmentname: item.name,
                        address: item.address
                    });
                });
                this.setState({
                    data: columnData,
                    tableLoading: false
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    showModal() {
        this.setState({
            addVisible: true
        });
    }

    //点击表格中 修改 触发的操作
    updateHandleClick(edudepartmentname, address) {
        this.setState({
            modalTitle: "修改教育局信息",
            updateVisible: true,
            edudepartmentname: edudepartmentname,
            currentEdudepartmentname: edudepartmentname,
            currentAddress: address
        });
    }

    //新增教育局 点击提交按钮后的操作
    addEduDepartmentHandleClick() {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.addEduDepartmentFormValue;
        val.validateFields((err, values) => {
            if (!err) {
                addEduDepartmentApi(values)
                    .then((res) => {
                        if (res.data == "success") {
                            this.setState({
                                addVisible: false,
                                confirmLoading: false
                            });
                            message.success("成功添加教育局！");
                            this.refreshData();
                            afterDepartmentDataChange("edudepartment");
                            val.resetFields();
                        } else if (res.data == "fail") {
                            this.setState({
                                alertVisible: true,
                                confirmLoading: false,
                                msg: "教育局已存在!"
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            } else {
                this.setState({
                    confirmLoading: false
                });
            }
        });
    }

    //修改信息 点击提交按钮后的操作
    updateEduDepartmentHandleClick(edudepartmentname) {
        this.setState({
            confirmLoading: true
        });
        let val = this.refs.updateEduDepartmentFormValue;
        val.validateFields((err, values) => {
            if (!err) {
                updateEduDepartmentApi(edudepartmentname, values)
                    .then((res) => {
                        if (res.data == "success") {
                            this.setState({
                                updateVisible: false,
                                confirmLoading: false
                            });
                            this.refreshData();
                            afterDepartmentDataChange("edudepartment");
                            val.resetFields();
                        } else if (res.data == "fail") {
                            this.setState({
                                alertVisible: true,
                                updateVisible: true,
                                confirmLoading: false,
                                msg: "修改失败,请检查信息或稍后再试!"
                            });
                        }
                    })
                    .catch((e) => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data)
                            console.info(e.response.status)
                            console.info(e.response.headers)
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request)
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info('error', e.message)
                        }
                        console.info(e.config)
                    });
            } else {
                this.setState({
                    confirmLoading: false
                });
            }
        });
    }

    //关闭 教育局名已存在 的提示
    handleClose() {
        this.setState({ alertVisible: false });
    }

    //关闭模态框
    handleCancel(modal) {
        this.setState({
            alertVisible: false
        });
        if (modal == "add") {
            this.setState({
                addVisible: false
            });
        }
        if (modal == "update") {
            this.setState({
                updateVisible: false
            });
        }
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        this.setState({
            searchTextEdudepartment: selectedKeys[0],
            searchTextAddress: selectedKeys[0]
        });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        this.setState({
            searchTextEdudepartment: '',
            searchTextAddress: '',
        });
    }

    render() {
        return (
            <div>
                <div style={{ marginBottom: 16 }}>
                    <Button type="primary" onClick={this.showModal.bind(this)} size="large">
                        <Icon type="user-add" />新增教育局
                    </Button>
                    {
                        this.state.addVisible ? (
                            <Modal
                                title="新增教育局"
                                visible={this.state.addVisible}
                                onCancel={this.handleCancel.bind(this, "add")}
                                closable
                                footer={[
                                    <Button key="submit" type="primary" size="large" loading={this.state.confirmLoading} onClick={this.addEduDepartmentHandleClick.bind(this)}>提交</Button>
                                ]}
                            >
                                <AddEdudepartmentForm ref="addEduDepartmentFormValue" />
                                {
                                    this.state.alertVisible ?
                                        (
                                            <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                        ) : null
                                }
                            </Modal>
                        ) : null
                    }
                    {
                        this.state.updateVisible ? (
                            <Modal
                                title={this.state.modalTitle}
                                visible={this.state.updateVisible}
                                onCancel={this.handleCancel.bind(this, "update")}
                                closable
                                footer={[
                                    <Button key="submit" type="primary" size="large" loading={this.state.confirmLoading} onClick={this.updateEduDepartmentHandleClick.bind(this, this.state.edudepartmentname)}>提交</Button>
                                ]}
                            >
                                <UpdateEdudepartmentForm ref="updateEduDepartmentFormValue"
                                    currentEdudepartmentname={this.state.currentEdudepartmentname}
                                    currentAddress={this.state.currentAddress} />

                                {
                                    this.state.alertVisible ?
                                        (
                                            <Alert message={this.state.msg} type="error" closable afterClose={this.handleClose.bind(this)} />
                                        ) : null
                                }
                            </Modal>
                        ) : null
                    }
                </div>
                <Table
                    dataSource={this.state.data}
                    columns={this.userColumns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    expandedRowRender={(record) => {
                        return (
                            <AllRoleInnerTable
                                departmentId={record.id}
                                departmentName={record.name}
                                //wrappedComponentRef={(inst) => this.teammateTableFormRef = inst}
                                //ref="teammateTableRefresh"
                                onRef={this.onRef}

                                that={this} />)
                    }}

                    pagination={{  //分页
                        total: this.state.data.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        );
    }
}

class addEdudepartmentForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allEduDepartment: []
        };
    }
    componentDidMount() {
        allEduDepartmentApi()
            .then((res) => {
                let allEduDepartment = [];
                res.data.forEach((item, index) => {
                    allEduDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allEduDepartment: allEduDepartment
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }
    render() {
        const allEduDepartmentOptions = this.state.allEduDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        return (
            <Form>
                <FormItem
                    label='教育局名称'
                    {...formItemLayout}>
                    {getFieldDecorator("edudepartmentname", {
                        rules: [{ required: true, message: "请输入教育局名称!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="请输入教育局名称"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='地址'
                    {...formItemLayout}>
                    {getFieldDecorator("address", {
                        rules: [{ required: true, message: "请输入地址!" }]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="home" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="请输入地址"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='监管单位'
                    {...formItemLayout}>
                    {getFieldDecorator("department", {
                        rules: [{
                            required: false,
                            message: "请选择监管单位!"
                        }]
                    })(
                        <Select
                            size="large"
                            placeholder="请选择监管单位">
                            {allEduDepartmentOptions}
                        </Select>
                    )}
                </FormItem>
            </Form>
        );
    }
}
const AddEdudepartmentForm = Form.create()(addEdudepartmentForm);

class updateEdudepartmentForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentEdudepartmentname: props.currentEdudepartmentname,
            currentAddress: props.currentAddress,
            allEduDepartment: []
        };
    }
    componentDidMount() {
        allEduDepartmentApi()
            .then((res) => {
                let allEduDepartment = [];
                res.data.forEach((item, index) => {
                    allEduDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allEduDepartment: allEduDepartment
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }
    render() {
        const allEduDepartmentOptions = this.state.allEduDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>);
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        return (
            <Form>
                <FormItem
                    label='教育局名称'
                    {...formItemLayout}>
                    {getFieldDecorator("edudepartmentname", {
                        // initialValue: this.state.currentEdudepartmentname,
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="solution" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="教育局名称"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='地址'
                    {...formItemLayout}>
                    {getFieldDecorator("address", {
                        // initialValue: this.state.currentAddress,
                    })(
                        <Input
                            size="large"
                            prefix={
                                <Icon type="home" style={{ color: "rgba(0,0,0,.25)" }} />
                            }
                            placeholder="地址"
                        />
                    )}
                </FormItem>
                <FormItem
                    label='监管单位'
                    {...formItemLayout}>
                    {getFieldDecorator("department", {
                        rules: [{
                            required: false,
                            message: "请选择监管单位!"
                        }]
                    })(
                        <Select
                            size="large"
                            placeholder="请选择监管单位">
                            {allEduDepartmentOptions}
                        </Select>
                    )}
                </FormItem>
            </Form>
        );
    }
}
const UpdateEdudepartmentForm = Form.create()(updateEdudepartmentForm);

class EduSchoolblueteeth extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableLoading: false,
            columnData: [],
            searchText: '',
            filteredInfo: null,
            sortedInfo: null,
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        let columnData = [];
        getInspectTypeApi(parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                res.data.forEach((item, index) => {
                    columnData.push({
                        key: index + 1,
                        eduDepartmentId: item.eduDepartmentId,
                        childDepartmentId: item.childDepartmentId,
                        childDepartment: item.childDepartment,
                        type: item.type,
                        loading: false,
                    });
                });
                this.setState({
                    columnData: columnData,
                    tableLoading: false,
                });
                this.child.refreshData();
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    importClidSchool() {
        importChildSchoolApi(parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                if (res.data === "success") {
                    // console.log(res);
                    this.refreshData();
                    this.setState({
                    })
                    message.success("更新成功");
                }
                else if (res.data === "fail") {
                    message.fail("更新失败");
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    typeChange(record) {
        let columnData = this.state.columnData;
        columnData[record.key - 1].loading = true;
        this.setState({
            columnData: columnData
        });
        updateInspectTypeApi(record.type, record.eduDepartmentId, record.childDepartmentId)
            .then((res) => {
                if (res.data === "success") {
                    // console.log(res);
                    columnData[record.key - 1].loading = false;
                    this.setState({
                        columnData: columnData
                    });
                    message.success("更新成功");
                }
                else if (res.data === "fail") {
                    message.fail("更新失败");
                    this.refreshData();
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    handleChange = (pagination, filters, sorter) => {
        //console.log('Various parameters', pagination, filters, sorter);
        this.setState({
            filteredInfo: filters,
            sortedInfo: sorter,
        });
    }

    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
        this.setState({
            searchText: selectedKeys[0],
        });
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
        this.setState({
            searchText: '',
        });
    }

    render() {
        let { sortedInfo, filteredInfo } = this.state;
        sortedInfo = sortedInfo || {};
        filteredInfo = filteredInfo || {};
        const columns = [
            {
                title: "序号",
                dataIndex: "key",
                key: "key"
            },
            {
                title: "学校名称",
                dataIndex: "childDepartment",
                key: "childDepartment",
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.childDepartment.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },
            {
                title: "蓝牙模式",
                key: "type",
                render: (text, record) => {
                    let key = record.key;
                    console.log(key);
                    return (
                        <SwitchiOpen checkedChildren="开" unCheckedChildren="关" defaultChecked={record.type} loading={record.loading} onChange={() => this.typeChange(record)} />
                    )
                }
            },
        ];
        return (
            <div>
                <div style={{ marginBottom: 16 }}>
                    <Button type="primary" onClick={() => this.importClidSchool()} size="large">
                        <Icon type="plus" />导入子学校
                    </Button>
                </div>
                <Table
                    dataSource={this.state.columnData}
                    columns={columns}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: '暂无数据' }}
                    onChange={this.handleChange}
                    rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                    pagination={{  //分页
                        total: this.state.columnData.length, //数据总数量
                        defaultPageSize: 10, //默认显示几条一页
                        //pageSize: 10,
                        showTotal: function (total) {  //设置显示一共几条数据
                            return '共 ' + total + ' 条数据';
                        },
                        showSizeChanger: true,
                        showQuickJumper: true,
                        pageSizeOptions: [5, 10, 20, 30]
                    }} />
            </div>
        )
    }
}
class addMainFeaturesFormAdmin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mainRoute:
                this.props.mainRoute === undefined ? undefined : this.props.mainRoute,
            mainFeaturesId:
                this.props.mainFeaturesId === undefined
                    ? undefined
                    : this.props.mainFeaturesId,
            modelTitle:
                this.props.modelTitle === undefined ? undefined : this.props.modelTitle,
            updateData:
                this.props.updateData === undefined ? undefined : this.props.updateData
        };
    }

    componentDidMount() {
        this.setState({
            mainRoute:
                this.props.mainRoute === undefined ? undefined : this.props.mainRoute,
            mainFeaturesId:
                this.props.mainFeaturesId === undefined
                    ? undefined
                    : this.props.mainFeaturesId,
            modelTitle:
                this.props.modelTitle === undefined ? undefined : this.props.modelTitle,
            updateData:
                this.props.updateData === undefined ? undefined : this.props.updateData
        });
    }

    render() {
        const { mainRoute, mainFeaturesId, modelTitle, updateData } = this.state;
        let beforeRoute;
        if (modelTitle == "addMainFeatures") {
            beforeRoute = "http://tidukeji.cn";
        } else {
            beforeRoute = "http://tidukeji.cn" + mainRoute;
        }

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 14 }
        };
        return (
            <Form>
                <Form.Item label="名称" {...formItemLayout}>
                    {getFieldDecorator("name", {
                        initialValue: updateData == undefined ? null : updateData.name,
                        rules: [
                            {
                                required: true,
                                message: "中文长度不超过8,不能有空格!",
                                max: 8,
                                type: "string",
                                whitespace: true
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-mingcheng"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="菜单名称"
                        />
                    )}
                </Form.Item>
                <Form.Item
                    label={
                        <span>
                            路由地址&nbsp;
                            <Tooltip title="相对地址">
                                <Icon type="question-circle-o" />
                            </Tooltip>
                        </span>
                    }
                    {...formItemLayout}
                >
                    {getFieldDecorator("route", {
                        initialValue: updateData == undefined ? null : updateData.route,
                        rules: [
                            {
                                required: true,
                                message: "请输入路由地址!",
                                whitespace: true
                            },
                            {
                                required: false,
                                pattern: new RegExp(/^\/.+$/, "g"),
                                message: "请以“/”开头填写路由地址"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-luyou"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            addonBefore={beforeRoute}
                            placeholder="路由地址"
                        />
                    )}
                </Form.Item>
                <Form.Item
                    label={
                        <span>
                            key&nbsp;
                            <Tooltip title="key值用于改变导航栏菜单高亮和展开">
                                <Icon type="question-circle-o" />
                            </Tooltip>
                        </span>
                    }
                    {...formItemLayout}
                >
                    {getFieldDecorator("key", {
                        initialValue: updateData == undefined ? null : updateData.key,
                        rules: [
                            {
                                required: true,
                                message: "请输入key值!",
                                whitespace: true
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-key"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="key"
                        />
                    )}
                </Form.Item>
                <Form.Item
                    label={
                        <span>
                            icon&nbsp;
                            <Tooltip title="icon值为项目矢量图库图标代码">
                                <Icon type="question-circle-o" />
                            </Tooltip>
                        </span>
                    }
                    {...formItemLayout}
                >
                    {getFieldDecorator("icon", {
                        initialValue: updateData == undefined ? null : updateData.icon,
                        rules: [
                            {
                                required: true,
                                message: "请输入icon值!",
                                whitespace: true
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-tubiao"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="icon"
                        />
                    )}
                </Form.Item>
                <Form.Item
                    label={
                        <span>
                            description&nbsp;
                            <Tooltip title="该功能的描述、介绍">
                                <Icon type="question-circle-o" />
                            </Tooltip>
                        </span>
                    }
                    {...formItemLayout}
                >
                    {getFieldDecorator("description", {
                        initialValue:
                            updateData == undefined ? null : updateData.description,
                        rules: [
                            {
                                required: true,
                                message: "请输入简要介绍!"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-miaoshu1"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="icon"
                        />
                    )}
                </Form.Item>
            </Form>
        );
    }
}

const AddMainFeaturesFormAdmin = Form.create()(addMainFeaturesFormAdmin);

class featuresitemOfAdmin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            addFeatures: false,
            confirmLoading: false,
            mainFeaturesId: undefined,
            mainRoute: undefined,
            modelTitle: undefined,
            cardLoading: false,
            data: [],
            key: 0,
            initLoading: false,
            updateData: undefined,
            alertVisible: false
        };
    }

    refreshData() {
        const data = [];
        this.setState({
            cardLoading: true,
            initLoading: true
        });
        getAllFeaturesApi()
            .then(res => {
                res.data.forEach((item, index) => {
                    data.push({
                        key: index,
                        id: item.id,
                        name: item.name,
                        description: item.description,
                        route: item.route,
                        icon: item.icon,
                        order: item.order,
                        childFeatures: item.childFeatures,
                        keyformenu: item.key
                    });
                });
                this.setState({
                    data: data,
                    cardLoading: false,
                    initLoading: false
                });
                if (this.state.mainRoute === undefined) {
                    this.setState({
                        mainRoute: data[0].route
                    });
                }
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    componentDidMount() {
        this.refreshData();
    }

    onClickCard(d) {
        this.setState({
            key: d.key,
            mainRoute: d.route
        });
    }

    onDelete(id) {
        this.setState({
            initLoading: true,
            cardLoading: true
        });
        deleteChildFeaturesApi(id)
            .then(res => {
                if (res.data == "success") {
                    message.success("删除子功能模块成功！");
                    this.refreshData();
                } else {
                    this.setState({
                        msg: "删除子功能模块失败！"
                    });
                }
                this.setState({
                    cardLoading: false,
                    initLoading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    addModelVisable(type, item) {
        this.setState({
            addFeatures: true,
            modelTitle: type,
            loading: true,
            updateData: item
        });
    }

    handleCancel() {
        this.setState({
            addFeatures: false,
            confirmLoading: false,
            loading: false
        });
    }

    // 关闭模态框错误提示
    handleClose = () => {
        this.setState({ alertVisible: false });
    };

    commitForm(type) {
        this.setState({
            confirmLoading: true,
            initLoading: true,
            cardLoading: true
        });
        const data = this.state.data;
        let updateData = this.state.updateData;
        let key = this.state.key;
        let val = this.refs.addMainFeaturesFormAdmin;
        val.validateFields((err, values) => {
            if (!err) {
                let parent = 0;
                let order = 0;
                if (type == "addMainFeatures") {
                    parent = 0;
                    if (data.length > 0) {
                        order = data[data.length - 1].order + 1;
                    } else {
                        order = 1;
                    }
                    addMainFeaturesApi(values, order)
                        .then(res => {
                            if (res.data == "success") {
                                message.success("新增主功能模块成功！");
                                this.handleCancel(); //关闭模态框
                                this.refreshData();
                            } else if (res.data == "contained") {
                                message.error("功能或路由地址已存在，请修改！");
                            } else {
                                message.error("新增主功能模块失败，请检查表单内容");
                            }
                            this.setState({
                                confirmLoading: false,
                                initLoading: false,
                                cardLoading: false
                            });
                        })
                        .catch(e => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data);
                                console.info(e.response.status);
                                console.info(e.response.headers);
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request);
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info("error", e.message);
                            }
                            console.info(e.config);
                        });
                } else if (type == "addchildFeatures") {
                    let childFeatures = data[key].childFeatures;
                    parent = data[key].id;
                    order =
                        childFeatures.length === 0
                            ? 1
                            : childFeatures[childFeatures.length - 1].order + 1;

                    addChildFeaturesApi(values, parent, order)
                        .then(res => {
                            if (res.data == "success") {
                                message.success("新增子功能模块成功！");
                                this.handleCancel(); //关闭模态框
                                this.refreshData();
                            } else if (res.data == "contained") {
                                message.error("功能或路由地址已存在，请修改！");
                            } else {
                                message.error("新增子功能模块失败，请检查表单内容");
                            }
                            this.setState({
                                confirmLoading: false,
                                initLoading: false,
                                cardLoading: false
                            });
                        })
                        .catch(e => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data);
                                console.info(e.response.status);
                                console.info(e.response.headers);
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request);
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info("error", e.message);
                            }
                            console.info(e.config);
                        });
                } else if (type == "update") {
                    updateChildFeaturesApi(values, updateData.id)
                        .then(res => {
                            if (res.data == "success") {
                                message.success("更新子功能模块成功！");
                                this.handleCancel(); //关闭模态框
                                this.refreshData();
                            } else if (res.data == "contained") {
                                message.error("功能或路由地址已存在，请修改！");
                            } else {
                                message.error("更新功能模块失败，请检查表单内容");
                            }
                            this.setState({
                                confirmLoading: false,
                                initLoading: false,
                                cardLoading: false
                            });
                        })
                        .catch(e => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data);
                                console.info(e.response.status);
                                console.info(e.response.headers);
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request);
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info("error", e.message);
                            }
                            console.info(e.config);
                        });
                }
            }
        });
    }

    render() {
        const { initLoading, loading, data, key } = this.state;
        const gridStyle = {
            width: "100%",
            textAlign: "center"
        };

        const gridStyleChoose = {
            width: "100%",
            textAlign: "center",
            background: "#f3f9f1"
        };

        const cardGrid = data.map((d, index) => (
            <Card.Grid
                style={d.key == key ? gridStyleChoose : gridStyle}
                onClick={() => this.onClickCard(d)}
            >
                <Meta
                    avatar={
                        <IconFont
                            type={d.icon}
                            style={{
                                fontSize: "30px"
                            }}
                        />
                    }
                    title={d.name}
                    description={
                        <div
                            title={d.description}
                            style={{
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                overflow: "hidden"
                            }}
                        >
                            {d.description}
                        </div>
                    }
                />
            </Card.Grid>
        ));
        const loadMore =
            !initLoading && !loading ? (
                <div
                    style={{
                        textAlign: "center",
                        marginTop: 12,
                        height: 32,
                        lineHeight: "32px"
                    }}
                >
                    <Button onClick={() => this.addModelVisable("addchildFeatures")}>
                        add more
              </Button>
                </div>
            ) : null;

        let list = data.length !== 0 ? data[key].childFeatures : [];

        return (
            <Row
                justify="space-around"
                gutter="48"
                style={{
                    background: "#fff",
                    height: "auto"
                }}
            >
                <Col
                    span={5}
                    className="inner"
                    id="right"
                    style={{
                        background: "#fff",
                        height: "100%"
                    }}
                >
                    <Button
                        type="primary"
                        onClick={() => this.addModelVisable("addMainFeatures")}
                        style={{
                            marginBottom: "20px"
                        }}
                    >
                        addFeatures
                    </Button>
                    <Modal
                        destroyOnClose
                        title={
                            this.state.modelTitle == "update"
                                ? "更新子功能模块"
                                : "新增功能模块"
                        }
                        width={1000}
                        visible={this.state.addFeatures}
                        onCancel={() => this.handleCancel()}
                        closable
                        footer={[
                            <Button
                                key="submit"
                                type="primary"
                                size="large"
                                loading={this.state.confirmLoading}
                                onClick={() => {
                                    this.commitForm(this.state.modelTitle);
                                }}
                            >
                                提交
                          </Button>
                        ]}
                    >
                        <AddMainFeaturesFormAdmin
                            ref="addMainFeaturesFormAdmin"
                            mainFeaturesId={this.state.mainFeaturesId}
                            mainRoute={this.state.mainRoute}
                            modelTitle={this.state.modelTitle}
                            updateData={this.state.updateData}
                        />
                    </Modal>
                    <Card
                        className="innerbox"
                        loading={this.state.cardLoading}
                        bordered={false}
                        style={{
                            width: "100%",
                            height: "560px"
                        }}
                    >
                        {cardGrid}
                    </Card>
                </Col>
                <Col
                    span={19}
                    style={{
                        marginTop: "40px"
                    }}
                >
                    <List
                        className="demo-loadmore-list"
                        loading={initLoading}
                        itemLayout="horizontal"
                        dataSource={list}
                        loadMore={loadMore}
                        renderItem={item => (
                            <List.Item
                                actions={[
                                    <Popconfirm
                                        title="Are you sure delete this feature?"
                                        onConfirm={() => this.onDelete(item.id)}
                                        okText="Yes"
                                        cancelText="No"
                                    >
                                        <a href="#">Delete</a>
                                    </Popconfirm>,
                                    <a
                                        href="#"
                                        onClick={() => this.addModelVisable("update", item)}
                                    >
                                        Update
                                  </a>
                                ]}
                            >
                                <Skeleton avatar title={false} loading={item.loading} active>
                                    <List.Item.Meta
                                        avatar={
                                            <IconFont
                                                type={item.icon}
                                                style={{
                                                    fontSize: "30px"
                                                }}
                                            />
                                        }
                                        title={<a>{item.name}</a>}
                                        description={
                                            <div
                                                title={item.description}
                                                style={{
                                                    textOverflow: "ellipsis",
                                                    whiteSpace: "nowrap",
                                                    overflow: "hidden"
                                                }}
                                            >
                                                {item.description}
                                            </div>
                                        }
                                    />
                                </Skeleton>
                                <div>{item.route}</div>
                            </List.Item>
                        )}
                    />
                </Col>
            </Row>
        );
    }
}
const FeaturesitemOfAdmin = Form.create()(featuresitemOfAdmin);

class Featuresset extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableData: [],
            tableLoading: false
        };
    }

    componentDidMount() {
        this.refreshData();
    }
    refreshData() {
        this.setState({
            tableLoading: true
        });
        allDepartmentApi()
            .then(res => {
                this.setState({
                    tableData: res.data,
                    tableLoading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    render() {
        // 外部表格表头
        const departmentColumns = [
            {
                title: "序号",
                dataIndex: "id",
                key: "id",
                render: (text, record, index) => `${index + 1}`
            },
            {
                title: "类型",
                dataIndex: "type",
                key: "type"
            },
            {
                title: "单位名称",
                dataIndex: "name",
                key: "name"
            },
            {
                title: "地址",
                dataIndex: "address",
                key: "address"
            }
        ];
        return (
            <Table
                dataSource={this.state.tableData}
                columns={departmentColumns}
                loading={this.state.tableLoading}
                locale={{ emptyText: "暂无数据" }}
                expandedRowRender={record => {
                    return (
                        <FeaturesInnerTable
                            departmentId={record.id}
                            departmentName={record.name}
                        />
                    );
                }}
                rowClassName={(record, index) =>
                    index % 2 === 0 ? "rowOne" : "rowTwo"
                }
                pagination={{
                    //分页
                    total: this.state.tableData.length, //数据总数量
                    defaultPageSize: 10, //默认显示几条一页
                    //pageSize: 10,
                    showTotal: function (total) {
                        //设置显示一共几条数据
                        return "共 " + total + " 条数据";
                    },
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: [5, 10, 20, 30]
                }}
            />
        );
    }
}


class AllRoleInnerTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableLoading: true,
            tableData: [],
            departmentId: props.departmentId,
            departmentName: props.departmentName,
            mouseEnterRow: "",
            drawervisable: false,
            alertVisible: false,
            msg: "",
            role: "",
            roleId: 0,
            mainFeatures: [],
            addButtonLoading: false,
            updateButtonLoading: false,
            addRoleVisable: false,
            confirmLoading: false
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        getDepartmentRoleAndFeaturesApi(this.state.departmentId)
            .then(res => {
                this.setState({
                    tableLoading: false,
                    tableData: res.data
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    showDrawer = record => {
        this.setState({
            drawervisable: true,
            role: record.rolename,
            roleId: record.id
        });
    };

    showModal = () => {
        this.setState({
            addRoleVisable: true
        });
    };

    deleteRole = roleId => {
        this.setState({
            addButtonLoading: true,
            tableLoading: true
        });
        deleteRoleApi(roleId)
            .then(res => {
                if (res.data == "success") {
                    message.success("删除角色成功！");
                    this.refreshData();
                } else {
                    this.setState({
                        msg: "删除失败！"
                    });
                }
                this.setState({
                    addButtonLoading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    };

    setPermission() {
        this.setState({
            updateButtonLoading: true
        });
        let val = this.refs.FeaturesForm;
        val.validateFields((err, values) => {
            if (!err) {
                updateRoleFeaturesApi(this.state.roleId, values.childFeaturesId)
                    .then(res => {
                        if (res.data == "success") {
                            message.success("权限配置成功！");
                            this.handleCancel(); //关闭抽屉
                            this.refreshData();
                        } else {
                            this.setState({
                                alertVisible: true,
                                msg: "权限配置失败，请检查表单信息！"
                            });
                        }
                        this.setState({
                            updateButtonLoading: false
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            } else {
                this.setState({
                    updateButtonLoading: false
                });
            }
        });
    }

    addRole = () => {
        this.setState({
            confirmLoading: true,
            addButtonLoading: true
        });
        let val = this.refs.AddRoleForm;
        val.validateFields((err, values) => {
            if (!err) {
                addRoleApi(this.state.departmentId, values.role, values.description)
                    .then(res => {
                        if (res.data == "success") {
                            message.success("新增角色成功！");
                            this.handleCancelModal(); //关闭模态框
                            this.refreshData();
                        } else {
                            this.setState({
                                alertVisible: true,
                                msg: "新增角色失败！"
                            });
                        }
                        this.setState({
                            confirmLoading: false,
                            addButtonLoading: false
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            }
        });
    };

    // 关闭抽屉
    handleCancel = () => {
        this.setState({
            msg: "",
            drawervisable: false,
            role: "",
            roleId: 0
        });
    };

    // 关闭模态框
    handleCancelModal = () => {
        this.setState({
            alertVisible: false,
            msg: "",
            addRoleVisable: false
        });
    };

    // 关闭模态框错误提示
    handleClose = () => {
        this.setState({ alertVisible: false });
    };

    render() {
        const roleColumns = [
            {
                title: "用户角色",
                dataIndex: "rolename",
                key: "rolename",
                width: "10%"
            },

            {
                title: "描述",
                dataIndex: "description",
                key: "description",
                width: "20%",
                render: (text, record, index) => {
                    return (
                        <div
                            title={record.description}
                            style={{
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                overflow: "hidden"
                            }}
                        >
                            {record.description}
                        </div>
                    );
                }
            },
            {
                title: "操作详情",
                key: "action",
                width: "10%",
                render: (text, record) => (
                    <span>

                        <Popconfirm
                            title="Are you sure delete this role?"
                            onConfirm={() => this.deleteRole(record.id)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <a href="javascript:;">Delete</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];
        return (
            <div
                style={{
                    textAlign: "center"
                }}
            >
                <Table
                    columns={roleColumns}
                    dataSource={this.state.tableData}
                    pagination={false}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: "暂无数据" }}
                    bordered={true}
                    rowClassName={(record, index) => {
                        let className = "";
                        index % 2 === 0
                            ? (className = "mytr rowOne")
                            : (className = "mytr rowTwo");
                        record.identity === this.state.mouseEnterRow
                            ? (className += " mouseEnterRow")
                            : (className += "");
                        return className;
                    }}
                    onRow={record => {
                        return {
                            onMouseEnter: event => {
                                this.setState({
                                    mouseEnterRow: record.identity
                                });
                            }, // 鼠标移入行
                            onMouseLeave: event => {
                                this.setState({
                                    mouseEnterRow: ""
                                });
                            }
                        };
                    }}
                />
                <Drawer
                    title="权限配置"
                    width={1000}
                    destroyOnClose
                    visible={this.state.drawervisable}
                    onClose={() => {
                        this.handleCancel();
                    }}
                    closable
                >
                    <FeaturesForm
                        ref="FeaturesForm"
                        role={this.state.role}
                        roleId={this.state.roleId}
                        departmentName={this.state.departmentName}
                    />
                    {this.state.alertVisible ? (
                        <Row>
                            <Col offset={5} span={14}>
                                <Alert
                                    message={this.state.msg}
                                    type="error"
                                    closable
                                    afterClose={() => {
                                        this.handleClose();
                                    }}
                                />
                            </Col>
                        </Row>
                    ) : null}
                    <div
                        style={{
                            position: "absolute",
                            left: 0,
                            bottom: 0,
                            width: "100%",
                            borderTop: "1px solid #e9e9e9",
                            padding: "10px 16px",
                            background: "#fff",
                            textAlign: "right"
                        }}
                    >
                        <Button
                            type="primary"
                            size="large"
                            loading={this.state.updateButtonLoading}
                            onClick={() => this.setPermission()}
                        >
                            保存
                        </Button>
                    </div>
                </Drawer>
                <Modal
                    destroyOnClose
                    title="新增角色"
                    width={1000}
                    visible={this.state.addRoleVisable}
                    onCancel={() => this.handleCancelModal()}
                    closable
                    footer={[
                        <Button
                            key="submit"
                            type="primary"
                            size="large"
                            loading={this.state.confirmLoading}
                            onClick={() => {
                                this.addRole();
                            }}
                        >
                            提交
                        </Button>
                    ]}
                >
                    <AddRoleForm
                        ref="AddRoleForm"
                        departmentName={this.state.departmentName}
                    />
                </Modal>
                <Button
                    type="primary"
                    style={{
                        marginTop: "20px"
                    }}
                    onClick={() => this.showModal()}
                    loading={this.state.addButtonLoading}
                >
                    创建角色
                </Button>
            </div>
        );
    }
}

class FeaturesInnerTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tableLoading: true,
            tableData: [],
            departmentId: props.departmentId,
            departmentName: props.departmentName,
            mouseEnterRow: "",
            drawervisable: false,
            alertVisible: false,
            msg: "",
            role: "",
            roleId: 0,
            mainFeatures: [],
            addButtonLoading: false,
            updateButtonLoading: false,
            addRoleVisable: false,
            confirmLoading: false
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            tableLoading: true
        });
        getDepartmentRoleAndFeaturesApi(this.state.departmentId)
            .then(res => {
                this.setState({
                    tableLoading: false,
                    tableData: res.data
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    showDrawer = record => {
        this.setState({
            drawervisable: true,
            role: record.rolename,
            roleId: record.id
        });
    };

    showModal = () => {
        this.setState({
            addRoleVisable: true
        });
    };

    deleteRole = roleId => {
        this.setState({
            addButtonLoading: true,
            tableLoading: true
        });
        deleteRoleApi(roleId)
            .then(res => {
                if (res.data == "success") {
                    message.success("删除角色成功！");
                    this.refreshData();
                } else {
                    this.setState({
                        msg: "删除失败！"
                    });
                }
                this.setState({
                    addButtonLoading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    };

    setPermission() {
        this.setState({
            updateButtonLoading: true
        });
        let val = this.refs.FeaturesForm;
        val.validateFields((err, values) => {
            if (!err) {
                updateRoleFeaturesApi(this.state.roleId, values.childFeaturesId)
                    .then(res => {
                        if (res.data == "success") {
                            message.success("权限配置成功！");
                            this.handleCancel(); //关闭抽屉
                            this.refreshData();
                        } else {
                            this.setState({
                                alertVisible: true,
                                msg: "权限配置失败，请检查表单信息！"
                            });
                        }
                        this.setState({
                            updateButtonLoading: false
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            } else {
                this.setState({
                    updateButtonLoading: false
                });
            }
        });
    }

    addRole = () => {
        this.setState({
            confirmLoading: true,
            addButtonLoading: true
        });
        let val = this.refs.AddRoleForm;
        val.validateFields((err, values) => {
            if (!err) {
                addRoleApi(this.state.departmentId, values.role, values.description)
                    .then(res => {
                        if (res.data == "success") {
                            message.success("新增角色成功！");
                            this.handleCancelModal(); //关闭模态框
                            this.refreshData();
                        } else {
                            this.setState({
                                alertVisible: true,
                                msg: "新增角色失败！"
                            });
                        }
                        this.setState({
                            confirmLoading: false,
                            addButtonLoading: false
                        });
                    })
                    .catch(e => {
                        if (e.response) {
                            //请求已发出，服务器返回状态码不是2xx。
                            console.info(e.response.data);
                            console.info(e.response.status);
                            console.info(e.response.headers);
                        } else if (e.request) {
                            // 请求已发出，但没有收到响应
                            // e.request 在浏览器里是一个XMLHttpRequest实例，
                            // 在node中是一个http.ClientRequest实例
                            console.info(e.request);
                        } else {
                            //发送请求时异常，捕捉到错误
                            console.info("error", e.message);
                        }
                        console.info(e.config);
                    });
            }
        });
    };

    // 关闭抽屉
    handleCancel = () => {
        this.setState({
            msg: "",
            drawervisable: false,
            role: "",
            roleId: 0
        });
    };

    // 关闭模态框
    handleCancelModal = () => {
        this.setState({
            alertVisible: false,
            msg: "",
            addRoleVisable: false
        });
    };

    // 关闭模态框错误提示
    handleClose = () => {
        this.setState({ alertVisible: false });
    };

    render() {
        const roleColumns = [
            {
                title: "用户角色",
                dataIndex: "rolename",
                key: "rolename",
                width: "10%"
            },
            {
                title: "主功能模块",
                dataIndex: "features",
                key: "features",
                width: "60%",
                render: (text, record, index) => {
                    const tags = record.childFeatures.map(row => (
                        <Tag color="orange">{row.name}</Tag>
                    ));
                    return <div>{tags}</div>;
                }
            },
            {
                title: "描述",
                dataIndex: "description",
                key: "description",
                width: "20%",
                render: (text, record, index) => {
                    return (
                        <div
                            title={record.description}
                            style={{
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                                overflow: "hidden"
                            }}
                        >
                            {record.description}
                        </div>
                    );
                }
            },
            {
                title: "操作详情",
                key: "action",
                width: "10%",
                render: (text, record) => (
                    <span>
                        <a href="javascript:;" onClick={() => this.showDrawer(record)}>
                            Manage
                        </a>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="Are you sure delete this role?"
                            onConfirm={() => this.deleteRole(record.id)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <a href="javascript:;">Delete</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];
        return (
            <div
                style={{
                    textAlign: "center"
                }}
            >
                <Table
                    columns={roleColumns}
                    dataSource={this.state.tableData}
                    pagination={false}
                    loading={this.state.tableLoading}
                    locale={{ emptyText: "暂无数据" }}
                    bordered={true}
                    rowClassName={(record, index) => {
                        let className = "";
                        index % 2 === 0
                            ? (className = "mytr rowOne")
                            : (className = "mytr rowTwo");
                        record.identity === this.state.mouseEnterRow
                            ? (className += " mouseEnterRow")
                            : (className += "");
                        return className;
                    }}
                    onRow={record => {
                        return {
                            onMouseEnter: event => {
                                this.setState({
                                    mouseEnterRow: record.identity
                                });
                            }, // 鼠标移入行
                            onMouseLeave: event => {
                                this.setState({
                                    mouseEnterRow: ""
                                });
                            }
                        };
                    }}
                />
                <Drawer
                    title="权限配置"
                    width={1000}
                    destroyOnClose
                    visible={this.state.drawervisable}
                    onClose={() => {
                        this.handleCancel();
                    }}
                    closable
                >
                    <FeaturesForm
                        ref="FeaturesForm"
                        role={this.state.role}
                        roleId={this.state.roleId}
                        departmentName={this.state.departmentName}
                    />
                    {this.state.alertVisible ? (
                        <Row>
                            <Col offset={5} span={14}>
                                <Alert
                                    message={this.state.msg}
                                    type="error"
                                    closable
                                    afterClose={() => {
                                        this.handleClose();
                                    }}
                                />
                            </Col>
                        </Row>
                    ) : null}
                    <div
                        style={{
                            position: "absolute",
                            left: 0,
                            bottom: 0,
                            width: "100%",
                            borderTop: "1px solid #e9e9e9",
                            padding: "10px 16px",
                            background: "#fff",
                            textAlign: "right"
                        }}
                    >
                        <Button
                            type="primary"
                            size="large"
                            loading={this.state.updateButtonLoading}
                            onClick={() => this.setPermission()}
                        >
                            保存
                        </Button>
                    </div>
                </Drawer>
                <Modal
                    destroyOnClose
                    title="新增角色"
                    width={1000}
                    visible={this.state.addRoleVisable}
                    onCancel={() => this.handleCancelModal()}
                    closable
                    footer={[
                        <Button
                            key="submit"
                            type="primary"
                            size="large"
                            loading={this.state.confirmLoading}
                            onClick={() => {
                                this.addRole();
                            }}
                        >
                            提交
                        </Button>
                    ]}
                >
                    <AddRoleForm
                        ref="AddRoleForm"
                        departmentName={this.state.departmentName}
                    />
                </Modal>
                <Button
                    type="primary"
                    style={{
                        marginTop: "20px"
                    }}
                    onClick={() => this.showModal()}
                    loading={this.state.addButtonLoading}
                >
                    addRole
                </Button>
            </div>
        );
    }
}

class featuresForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            role: props.role,
            roleId: props.roleId,
            departmentName: props.departmentName,
            checkLoading: false,
            data: []
        };
    }

    componentDidMount() {
        const data = [];
        this.setState({
            checkLoading: true
        });
        getRoleCanAddFeaturesApi(this.state.roleId)
            .then(res => {
                res.data.forEach((item, index) => {
                    data.push({
                        id: item.id,
                        name: item.name,
                        childFeatures: item.childFeatures
                    });
                });
                this.setState({
                    data: data,
                    checkLoading: false
                });
            })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 3 },
            wrapperCol: { span: 17 }
        };
        let checkMenu = [];
        let checked = [];
        if (this.state.data.length > 0) {
            checkMenu = this.state.data.map(val => {
                let tmp = val.childFeatures.map(childVal => {
                    childVal.used === 1 ? checked.push(childVal.id) : null;
                    return (
                        <Col span={6} style={{ margin: "4px 0" }}>
                            <Checkbox value={childVal.id}>{childVal.name}</Checkbox>
                        </Col>
                    );
                });
                return (
                    <Row>
                        <Row gutter="8">{tmp}</Row>
                        <Divider
                            style={{ margin: "6px 0", fontSize: "15px", color: "#a1afc9" }}
                        >
                            {val.name}
                        </Divider>
                    </Row>
                );
            });
        }
        return (
            <Skeleton loading={this.state.checkLoading} active>
                <Form>
                    <Form.Item label="单位名称" {...formItemLayout}>
                        {getFieldDecorator("department", {
                            initialValue: this.state.departmentName
                        })(
                            <Input
                                size="large"
                                prefix={
                                    <IconFont
                                        type="icon-jiaoyuju"
                                        style={{ color: "rgba(0,0,0,.25)" }}
                                    />
                                }
                                placeholder="单位名称"
                                disabled={true}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="用户角色" {...formItemLayout}>
                        {getFieldDecorator("role", {
                            initialValue: this.state.role
                        })(
                            <Input
                                size="large"
                                prefix={
                                    <IconFont
                                        type="icon-team"
                                        style={{ color: "rgba(0,0,0,.25)" }}
                                    />
                                }
                                placeholder="用户角色"
                                disabled={true}
                            />
                        )}
                    </Form.Item>
                    <Form.Item label="权限" {...formItemLayout}>
                        {getFieldDecorator("childFeaturesId", {
                            initialValue: checked
                        })(
                            <Checkbox.Group style={{ marginTop: "10px" }}>
                                {checkMenu}
                            </Checkbox.Group>
                        )}
                    </Form.Item>
                </Form>
            </Skeleton>
        );
    }
}
const FeaturesForm = Form.create()(featuresForm);

class addRoleForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            departmentName: props.departmentName
        };
    }

    render() {
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 15 }
        };
        const { getFieldDecorator } = this.props.form;
        return (
            <Form>
                <Form.Item label="单位名称" {...formItemLayout}>
                    {getFieldDecorator("department", {
                        initialValue: this.state.departmentName
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-jiaoyuju"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="单位名称"
                            disabled={true}
                        />
                    )}
                </Form.Item>
                <Form.Item label="用户角色" {...formItemLayout}>
                    {getFieldDecorator("role", {
                        rules: [
                            {
                                required: true,
                                message: "请输入角色名"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-team"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="角色名称"
                        />
                    )}
                </Form.Item>
                <Form.Item label="描述" {...formItemLayout}>
                    {getFieldDecorator("description", {
                        rules: [
                            {
                                required: true,
                                message: "请输入简要介绍!"
                            }
                        ]
                    })(
                        <Input
                            size="large"
                            prefix={
                                <IconFont
                                    type="icon-miaoshu1"
                                    style={{ color: "rgba(0,0,0,.25)" }}
                                />
                            }
                            placeholder="该角色的描述、介绍"
                        />
                    )}
                </Form.Item>
            </Form>
        );
    }
}
const AddRoleForm = Form.create()(addRoleForm);




class systemUsedStatics extends Component {
    constructor(props) {
        super(props)

        this.state = {
            userdata: [],
            useddepartment: [],
            nousedeoartment: [],
            alluserdata: [],
            allEduDepartment: [],
            pollingUsed: [],
            noPollingUsed: [],
            patrolUsed: [],
            noPatrolUsed: [],
            featuredata: {
                noPatrol: 0,
                patrol: 0,
                polling: 0,
                noPolling: 0,
                duty: 0,
                inout: 0,
                warning: 0
            },
            schoolUrl: '',
            data1: [],
            branchCampus: [],
            selectStatus: '',
            chartLoading: true,
            selectFunction: '全部',
            isSearch: false,
            curSchoolLevel: '',
            curDepartment: -1,
            curPage: 1,
            curPageSize: 10,
            searchData: []

        }
    }




    //天数
    GetNumberOfDays(date1, date2) {//获得天数
        //date1：开始日期，date2结束日期
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date());
        var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数

        // console.log(a1, a2, day);
        return day
    }


    toSchoolUrl(record) {
        getSchoolInfoByNameApi(record.name)
            .then((res) => {
                console.log("res.data: ", res.data)
                if (res.data == '') {
                    message.info('暂无进行大屏配置', 1);
                } else {
                    this.setState({
                        // schoolUrl: UrlPrefix + screenath + parseInt(res.data.id) + "/" + res.data.name + '/' + 1 + '/' + res.data.moduleWatch + '/' + origin
                        schoolUrl: screenUrl + screenath + parseInt(res.data.id) + '/' + 1
                    })
                    window.open(this.state.schoolUrl)
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    componentDidMount() {
        let departmentId = parseInt(sessionStorage.getItem("departmentId"))
        if (sessionStorage.getItem("schoolLevel") == '区教育局') {
            this.handlelateltdata(-departmentId)
        } else {
            this.handlelateltdata(0)
            // this.handlelateltdata(1)
        }


        allEduDepartmentApi(departmentId)
            .then((res) => {
                let allEduDepartment = [];


                res.data.forEach((item, index) => {

                    allEduDepartment.push({
                        value: item.id,
                        text: item.name
                    });
                });
                this.setState({
                    allEduDepartment: allEduDepartment
                });
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
        // 平台账号 系统使用 全部学校
        
        if(sessionStorage.getItem("departmentId") == 0) {
            this.getSchoolLevelByEduId(1, 1)
        } else {
            this.getSchoolLevelByEduId(parseInt(sessionStorage.getItem("departmentId")), 1)
        }


    }
    handlelateltdata = (parent, value, selectStatus) => {
        this.setState({
            tableLoading: true
        })

        getLatelyInfoApi(parent, value).then(res => {
            let arr = [];
            let nousedeoartment = []
            let useddepartment = []
            let pollingUsed = []
            let noPollingUsed = []
            let patrolUsed = []
            let noPatrolUsed = []
            let featuredata = {
                noPatrol: 0,
                patrol: 0,
                polling: 0,
                noPolling: 0,
                duty: 0,
                inout: 0,
                warning: 0
            }
            console.log("The Data:")
            console.log(res.data.getLatelyInfo)
            res.data.getLatelyInfo.map((item, index) => {

                if (item.patrolLatelyTime || item.inspectLatelyTime || item.inOrOutLatelyTime || item.dutyWeekLatelyTime || item.warnLatelyTime) {

                    if (item.patrolLatelyTime) {
                        ++featuredata.patrol
                        patrolUsed.push({
                            name: item.name || "无",
                            patrolLatelyTime: item.patrolLatelyTime || -1,
                            patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                            pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                            dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                            inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                            inspectLatelyTime: item.inspectLatelyTime || -1,
                            dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                            inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                            warnLatelyTime: item.warnLatelyTime || -1,
                            id: item.id,
                            key: index + 1,
                        })
                    }else{
                        ++featuredata.noPatrol
                        noPatrolUsed.push({
                            name: item.name || "无",
                            patrolLatelyTime: item.patrolLatelyTime || -1,
                            patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                            pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                            dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                            inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                            inspectLatelyTime: item.inspectLatelyTime || -1,
                            dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                            inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                            warnLatelyTime: item.warnLatelyTime || -1,
                            id: item.id,
                            key: index + 1,
                        })
                    }


                    if (item.inspectLatelyTime) {
                        ++featuredata.polling
                        pollingUsed.push({
                            name: item.name || "无",
                            patrolLatelyTime: item.patrolLatelyTime || -1,
                            patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                            pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                            dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                            inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                            inspectLatelyTime: item.inspectLatelyTime || -1,
                            dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                            inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                            warnLatelyTime: item.warnLatelyTime || -1,
                            id: item.id,
                            key: index + 1,
                        })
                    }else{
                        ++featuredata.noPolling
                        noPollingUsed.push({
                            name: item.name || "无",
                            patrolLatelyTime: item.patrolLatelyTime || -1,
                            patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                            pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                            dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                            inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                            inspectLatelyTime: item.inspectLatelyTime || -1,
                            dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                            inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                            warnLatelyTime: item.warnLatelyTime || -1,
                            id: item.id,
                            key: index + 1,
                        })
                    }
                    if (item.inOrOutLatelyTime) ++featuredata.duty
                    if (item.dutyWeekLatelyTime) ++featuredata.inout
                    if (item.warnLatelyTime) ++featuredata.warning
                    useddepartment.push({
                        name: item.name || "无",
                        patrolLatelyTime: item.patrolLatelyTime || -1,
                        patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                        pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                        dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                        inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                        inspectLatelyTime: item.inspectLatelyTime || -1,
                        dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                        inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                        warnLatelyTime: item.warnLatelyTime || -1,
                        id: item.id,
                        key: index + 1,
                    })
                }
                else {
                    nousedeoartment.push({
                        name: item.name || "无",
                        patrolLatelyTime: item.patrolLatelyTime || -1,
                        patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                        pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                        dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                        inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                        inspectLatelyTime: item.inspectLatelyTime || -1,
                        dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                        inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                        warnLatelyTime: item.warnLatelyTime || -1,
                        id: item.id,
                        key: index + 1,
                    })
                    ++featuredata.noPatrol
                        noPatrolUsed.push({
                            name: item.name || "无",
                            patrolLatelyTime: item.patrolLatelyTime || -1,
                            patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                            pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                            dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                            inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                            inspectLatelyTime: item.inspectLatelyTime || -1,
                            dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                            inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                            warnLatelyTime: item.warnLatelyTime || -1,
                            id: item.id,
                            key: index + 1,
                        })
                        ++featuredata.noPolling
                        noPollingUsed.push({
                            name: item.name || "无",
                            patrolLatelyTime: item.patrolLatelyTime || -1,
                            patrolusedays: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                            pollingusedays: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                            dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                            inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                            inspectLatelyTime: item.inspectLatelyTime || -1,
                            dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                            inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                            warnLatelyTime: item.warnLatelyTime || -1,
                            id: item.id,
                            key: index + 1,
                        })
                }
                arr.push(
                    {
                        name: item.name || "无",
                        patrolLatelyTime: item.patrolLatelyTime || -1,
                        patrolusedays: this.GetNumberOfDays(item.patrolLatelyTime) || -1,
                        pollingusedays: this.GetNumberOfDays(item.inspectLatelyTime) || -1,
                        dutyusedays: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? this.GetNumberOfDays(item.dutyWeekLatelyTime) : -1,
                        inOrOutLatelyusedays: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                        inspectLatelyTime: item.inspectLatelyTime || -1,
                        dutyWeekLatelyTime: item.dutyWeekLatelyTime || -1,
                        inOrOutLatelyTime: item.inOrOutLatelyTime || -1,
                        warnLatelyTime: item.warnLatelyTime || -1,
                        id: item.id,
                        key: index + 1,
                    }
                )
                
            }
            )

            this.setState({
                useddepartment: useddepartment,
                nousedeoartment: nousedeoartment,
                alluserdata: arr,
                userdata: arr,
                pollingUsed: pollingUsed,
                noPollingUsed: noPollingUsed,
                patrolUsed: patrolUsed,
                noPatrolUsed: noPatrolUsed,
                tableLoading: false,
                featuredata: featuredata
            })

            if (this.state.selectStatus == '') {
                this.setState({
                    useddepartment: useddepartment,
                    nousedeoartment: nousedeoartment,
                    alluserdata: arr,
                    userdata: arr,
                    tableLoading: false,
                    featuredata: featuredata
                })
            } else if (this.state.selectStatus == '全部') {
                this.setState({
                    useddepartment: useddepartment,
                    nousedeoartment: nousedeoartment,
                    alluserdata: arr,
                    userdata: arr,
                    tableLoading: false,
                    featuredata: featuredata
                })
            } else if (this.state.selectStatus == '巡检已使用') {
                this.setState({
                    useddepartment: useddepartment,
                    nousedeoartment: nousedeoartment,
                    alluserdata: arr,
                    userdata: pollingUsed,
                    tableLoading: false,
                    featuredata: featuredata
                })
            } else if (this.state.selectStatus == '巡检未使用') {
                this.setState({
                    useddepartment: useddepartment,
                    nousedeoartment: nousedeoartment,
                    alluserdata: arr,
                    userdata: noPollingUsed,
                    tableLoading: false,
                    featuredata: featuredata
                })
            } else if (this.state.selectStatus == '巡更已使用') {
                this.setState({
                    useddepartment: useddepartment,
                    nousedeoartment: nousedeoartment,
                    alluserdata: arr,
                    userdata: patrolUsed,
                    tableLoading: false,
                    featuredata: featuredata
                })
            } else if (this.state.selectStatus == '巡更未使用') {
                this.setState({
                    useddepartment: useddepartment,
                    nousedeoartment: nousedeoartment,
                    alluserdata: arr,
                    userdata: noPatrolUsed,
                    tableLoading: false,
                    featuredata: featuredata
                })
            }

            // console.log("==============================", this.state.alluserdata.length)

        })
            .catch(e => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data);
                    console.info(e.response.status);
                    console.info(e.response.headers);
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request);
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info("error", e.message);
                }
                console.info(e.config);
            });

    }
    fliterByIsUsed = (value) => {
        this.setState({
            selectStatus: value
        })
        if (value == "巡检已使用") {
            this.setState({
                userdata: this.state.pollingUsed
            })
        }
        else if (value == "巡检未使用") {
            this.setState({
                userdata: this.state.noPollingUsed
            })
        }
        else if (value == "巡更已使用") {
            this.setState({
                userdata: this.state.patrolUsed
            })
        }
        else if (value == "巡更未使用") {
            this.setState({
                userdata: this.state.noPatrolUsed
            })
        }
        else {
            this.setState({
                userdata: this.state.alluserdata
            })
        }
    }
    onChange = (value) => {
        console.log(`selected ${value}`);
        this.handlelateltdata(value)
    }
    handleChange(pagination, filters, sorter) {
        //console.log("表格变化handleChange====", e);
        console.log('Various parameters', pagination, filters, sorter);

    }

    onRef = (ref) => {
        this.child = ref
    }

    fliterBySchoolLevel = (value) => {

        console.log("fliterBySchoolLevel==value", this.state.selectStatus)

        if (sessionStorage.getItem("schoolLevel") == '区教育局') {
            this.handlelateltdata(sessionStorage.getItem("departmentId"), value)

        } else {
            this.handlelateltdata(1, value)
        }
    }


    getSchoolLevelByEduId = (departmentId, allType) => {
        getSchoolLevelByEduIdApi(departmentId, allType)
        .then((res) => {
            this.setState({
                branchCampus: res.data,
            });

        })
    }


    searchSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
            if(this.state.curSchoolLevel != values.schoolLevel || this.state.curDepartment != values.department){
                var departmentId;
                if(!isNaN(values.department)){
                    departmentId = values.department
                }else{
                    departmentId = parseInt(sessionStorage.getItem("departmentId"))
                }
                this.handlelateltdata(departmentId, values.schoolLevel);
                this.setState({
                    curSchoolLevel: values.schoolLevel,
                    curDepartment: values.department
                })
            }
            this.fliterByIsUsed(values.useCondition);
        });
    }

    searchReset = () => {
        this.props.form.resetFields();
        this.setState({
            isSearch: false,
        })
    }


    handleSearch = (selectedKeys, confirm) => () => {
        confirm();
    }

    handleSearchReset = clearFilters => () => {
        clearFilters();
    }



    render() {
        let branchCampusOptions = [];
        branchCampusOptions.push(<Option value={null} key={-1}>全部</Option>)
        if (this.state.branchCampus.length != 0) {
            branchCampusOptions.push(this.state.branchCampus.map((d, index) =>
                <Option value={d.schoolLevel} key={index}>{d.schoolLevel}</Option>
            ))
        }

        const { getFieldDecorator, getFieldValue } = this.props.form;
        let labelCol = {
            sm: { span: 6 },
            xl: { span: 6 },
            xxl: { span: 5 },
        };

        let wrapperCol = {
            sm: { span: 18 },
            xl: { span: 18 },
            xxl: { span: 19 },
        };
        let name = sessionStorage.getItem("departmentName")
        let id = parseInt(sessionStorage.getItem("departmentId"))
        const allEduDepartmentOptions = []
        allEduDepartmentOptions.push(<Option value={-id} key={-id}>{name.substring(0, name.indexOf("市"))}全市</Option>)
        allEduDepartmentOptions.push(this.state.allEduDepartment.map((d, index) => <Option value={d.value} key={index}>{d.text}</Option>));
        let data = {
            all: this.state.alluserdata.length,
            used: this.state.useddepartment.length,
            noused: this.state.nousedeoartment.length,
            inspectUsed: this.state.featuredata.polling,
            noinspectUsed: this.state.featuredata.noPolling,
            patrolUsed: this.state.featuredata.patrol,
            nopatrolUsed:this.state.featuredata.noPatrol
        }
        // let filterinfo = ['未使用', "已使用", "全部"]
        let filterinfo = ["全部", '巡检已使用', "巡检未使用", "巡更已使用", "巡更未使用"]
        const filterinfooption = filterinfo.map((d, index) =>
            <Option key={d}>{d}</Option>

        )

        let filterFunctionInfo = ['巡检', "巡更", "全部"]
        const filterFunctionInfoOption = filterFunctionInfo.map((d, index) =>
            <Option key={d}>{d}</Option>

        )

        const userColumns = [
            // {
            //     title: "序号",
            //     dataIndex: "key",
            //     key: "key",
            //     width: "15%",
            //     align: "left",
            // },
            {
                title: "序号",
                dataIndex: "key",
                key: "key",
                // render: (text, record, index) => `${(this.state.curPage - 1) * this.state.curPageSize + index + 1}`
            },
            {
                title: '学校名称',
                dataIndex: 'name',
                key: 'name',
                filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
                    <div className="custom-filter-dropdown">
                        <Input
                            ref={ele => this.searchInput = ele}
                            value={selectedKeys[0]}
                            onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                            onPressEnter={this.handleSearch(selectedKeys, confirm)}
                        />
                        <Button type="primary" onClick={this.handleSearch(selectedKeys, confirm)}>查找</Button>
                        <Button onClick={this.handleSearchReset(clearFilters)}>重置</Button>
                    </div>
                ),
                filterIcon: filtered => <Icon type="search" style={{ color: filtered ? '#108ee9' : '#aaa', fontSize: '1.2em' }} />,
                onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
                onFilterDropdownVisibleChange: (visible) => {
                    if (visible) {
                        setTimeout(() => {
                            this.searchInput.focus();
                        });
                    }
                }
            },

            {
                title: '最近一次巡更',
                dataIndex: 'patrolLatelyTime',
                key: 'patrolLatelyTime',
                sorter: (a, b) => a.patrolusedays - b.patrolusedays,
                // defaultSortOrder: 'ascend',
                sortDirections: ['descend', 'ascend'],
                render: (text, record) => {
                    let error = <Tag color="grey">未使用</Tag>
                    let correct = <Badge count={record.patrolusedays == -1 || record.patrolusedays == 0 ? 0 : (record.patrolusedays + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
                        {
                            record.patrolusedays < 3 && record.patrolusedays >= -1 ? <Tag color="green">

                                {text}</Tag> : <Tag color="red">{text}</Tag>
                        }
                    </div></Badge>
                    return (
                        text == -1 ? error : correct
                    )
                }
            },
        
        
            {
                title: '最近一次巡检',
                dataIndex: 'inspectLatelyTime',
                key: 'inspectLatelyTime',
                sorter: (a, b) => a.pollingusedays - b.pollingusedays,

                sortDirections: ['descend', 'ascend'],
                render: (text, record) => {
                    let error = <Tag color="grey">未使用</Tag>
                    let correct = <Badge count={record.pollingusedays == -1 || record.pollingusedays == 0 ? 0 : (record.pollingusedays + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
                        {
                            record.pollingusedays < 15 && record.pollingusedays >= -1 ? <Tag color="green">

                                {text}</Tag> : <Tag color="red">{text}</Tag>
                        }
                    </div></Badge>
                    return (

                        text == -1 ? error : correct

                    )
                }
            },
            // {
            //     title: '最近一次值周',
            //     dataIndex: 'dutyWeekLatelyTime',
            //     sorter: (a, b) => a.dutyusedays - b.dutyusedays,

            //     sortDirections: ['descend', 'ascend'],
            //     key: 'dutyWeekLatelyTime',
            //     render: (text, record) => {
            //         let error = <Tag color="grey">未使用</Tag>
            //         let correct = <Badge count={record.dutyusedays == -1 || record.dutyusedays == 0 ? 0 : (record.dutyusedays + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
            //             {
            //                 record.dutyusedays < 3 && record.dutyusedays >= 0 ? <Tag color="green">

            //                     {text}</Tag> : <Tag color="red">{text}</Tag>
            //             }
            //         </div></Badge>
            //         return (
            //             text == -1 ? error : correct
            //         )
            //     }
            // },
            // {
            //     title: '最近一次考勤',
            //     dataIndex: 'inOrOutLatelyTime',
            //     sorter: (a, b) => a.inOrOutLatelyusedays - b.inOrOutLatelyusedays,

            //     sortDirections: ['descend', 'ascend'],
            //     key: 'inOrOutLatelyTime',
            //     render: (text, record) => {
            //         let error = <Tag color="grey">未使用</Tag>
            //         let correct = <Badge count={record.inOrOutLatelyusedays == -1 ? 0 : (record.inOrOutLatelyusedays + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
            //             {
            //                 record.inOrOutLatelyusedays < 3 && record.inOrOutLatelyusedays >= 0 ? <Tag color="green">

            //                     {text}</Tag> : <Tag color="red">{text}</Tag>
            //             }
            //         </div></Badge>
            //         return (
            //             text == -1 ? error : correct
            //         )
            //     }
            // },
            // {
            //     title: '最近一次报警',
            //     dataIndex: 'warnLatelyTime',
            //     key: 'warnLatelyTime',
            //     render: (text, record) => {
            //         let error = <Tag color="grey">未使用</Tag>
            //         let correct = <Tag color="blue">{text}</Tag>
            //         return (
            //             text == -1 ? error : correct
            //         )
            //     }
            // },

            {
                title: '详情',
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => {
                    //  console.log("============================", record)
                    return (
                        <span>
                            <a
                                onClick={this.toSchoolUrl.bind(this, record)}
                                // href={this.stahoolUrl}   
                                target="_blank"
                            >
                                查看详情
                            </a>
                            {/* <Button onClick={this.toSchoolUrl.bind(this, record)}> 查看详情</Button> */}
                        </span>
                    )
                }
            },


        ];




        return (
            <Spin tip="数据加载中..." size="large" spinning={this.state.tableLoading}>
                <div>
                    {
                        sessionStorage.schoolLevel == '区教育局' ? null :
                            <Select
                                style={{ width: 240, float: 'right', margin: 16, display: 'inline-block' }}
                                size="large"
                                onChange={this.onChange}
                                placeholder="请选择监管单位">
                                {allEduDepartmentOptions}
                            </Select>
                    }

                    <Total data={data} />


                    {/* <div style={{ width: "90%", height: "20rem" }}>
                    <TempleateTitle title="系统功能使用情况" />
                    < EchartsDemo7 chartdata={
                        {
                            xdata: ["巡更", "巡检", "值周", "道闸机", "烟感"],
                            ydata: [12, 12, 5, 4, 4],
                            divId: "feature"
                        }

                    } />

                </div> */}


                    <div>

                        <div>
                            <span style={{ display: 'inline-block' }} className='SystemUsedStatics_templeate_title'> 系统最近一次使用时间</span>

                            

                            {/* <Select
                                style={{ width: '15%', float: 'right', margin: 16, display: 'inline-block' }}
                                size="large"
                                allowClear={true}
                                onChange={this.fliterByIsUsed}
                                placeholder="请选择使用情况">
                                {filterinfooption}
                            </Select> */}

                            {/* <Select
                                style={{ width: '15%', float: 'right', margin: 16, display: 'inline-block' }}
                                allowClear={true}
                                size="large"
                                onChange={this.fliterByFunction}
                                placeholder="请选择功能类型">
                                {filterFunctionInfoOption}
                            </Select> */}

                            {/* <Select
                                style={{ width: '15%', float: 'right', margin: 16, display: 'inline-block' }}
                                allowClear={true}
                                size="large"
                                onChange={this.fliterBySchoolLevel}
                                placeholder="请选择学校类型">
                                {branchCampusOptions}
                            </Select>
                            {sessionStorage.getItem("departmentId") == 1 ? (
                                <Select
                                    style={{ width: '15%', float: 'right', margin: 16, display: 'inline-block' }}
                                    size="large"
                                    allowClear={true}
                                    onSelect = {(e) => {
                                        this.getSchoolLevelByEduId(e)
                                    }}
                                    placeholder="请选择区县">
                                    {allEduDepartmentOptions}
                                </Select>
                            ):null
                            } */}
                            

                            <Form
                                style={{
                                    padding: '12px',
                                    backgroundColor: '#fafafa',
                                    borderRadius: 8,
                                    marginBottom: 16,
                                }}
                                layout="inline"
                                onSubmit={this.searchSubmit}>
                                <Row>
                                    {sessionStorage.getItem("departmentType") == "教育局" ? (
                                        <Col span={8}>
                                        <FormItem
                                        // label="完成结果"
                                            style={{ width: '100%' }}
                                            labelCol={labelCol}
                                            wrapperCol={wrapperCol}>
                                            {getFieldDecorator("department", {
                                                rules: [{
                                                    required: false,
                                                }]
                                            })(
                                                <Select
                                                    allowClear={true}
                                                    style={{ width: '100%' }}
                                                    placeholder="请选择区县"
                                                    onSelect = {(e) => {
                                                        if(e < 0){
                                                            this.getSchoolLevelByEduId(parseInt(sessionStorage.getItem("departmentId")), 1)
                                                        }else {
                                                            this.getSchoolLevelByEduId(e, 0)
                                                        }
                                                    }}>
                                                {allEduDepartmentOptions}

                                                </Select>
                                            )}
                                        </FormItem>
                                    </Col>
                                    ):null
                                    }
                                
                                    <Col span={sessionStorage.getItem("departmentType") == "教育局" ? 5 : 8}>
                                        <FormItem
                                            //label="完成结果"
                                            style={{ width: '100%' }}
                                            labelCol={labelCol}
                                            wrapperCol={wrapperCol}>
                                            {getFieldDecorator("schoolLevel", {
                                                rules: [{
                                                    required: false,
                                                }]
                                            })(
                                                <Select
                                                    allowClear={true}
                                                    style={{ width: '100%' }}
                                                    placeholder="请选择学校类型">
                                                    {branchCampusOptions}
                                                </Select>
                                            )}
                                        </FormItem>
                                    </Col>
                                    <Col span={8}>
                                        <FormItem
                                           // label="完成结果"
                                            style={{ width: '100%' }}
                                            labelCol={labelCol}
                                            wrapperCol={wrapperCol}>
                                            {getFieldDecorator("useCondition", {
                                                rules: [{
                                                    required: false,
                                                }]
                                            })(
                                                <Select
                                                    allowClear={true}
                                                    style={{ width: '100%' }}
                                                    placeholder="请选择使用情况">
                                                   {filterinfooption}
                                                </Select>
                                            )}
                                        </FormItem>
                                    </Col>
                                    <Col>
                                        <FormItem
                                            style={{ float: 'right' }}>
                                            <Button type="primary" htmlType="submit">搜索</Button>
                                            <Button style={{ marginLeft: 8 }} onClick={this.searchReset}>清空</Button>
                                        </FormItem>
                                    </Col>
                                </Row>
                            </Form>


                        </div>

                        <Table
                            dataSource={this.state.userdata}
                            columns={userColumns}
                            loading={this.state.tableLoading}
                            locale={{ emptyText: '暂无数据' }}
                            onChange={this.handleChange}
                            onExpand={this.setSpinning}
                            rowClassName={(record, index) => index % 2 === 0 ? "rowOne" : "rowTwo"}
                            // expandedRowRender={(record) => {
                            //     return (
                            //             <ChartInnerTable
                            //                 //wrappedComponentRef={(inst) => this.teammateTableFormRef = inst}
                            //                 //ref="teammateTableRefresh"
                            //                 // onRef={this.onRef}
                            //                 // schoolName={record.name}
                            //                 schoolId={record.id}
                            //                 that={this}>
                            //             </ChartInnerTable>
                            //     )
                            // }}
                            pagination={{  //分页
                                total: this.state.searchData.length, //数据总数量
                                defaultPageSize: 10, //默认显示几条一页
                                //pageSize: 10,
                                showTotal: function (total) {  //设置显示一共几条数据
                                    return '共 ' + total + ' 条数据';
                                },
                                showSizeChanger: true,
                                showQuickJumper: true,
                                pageSizeOptions: [5, 10, 20, 30],
                                onChange: (page, pageSize) => {
                                    this.setState({
                                        curPage: page,
                                        curPageSize: pageSize
                                    })
                                }
                            }}
                        />
                    </div>
                    {/* <div style={{ width: "90%", height: "23rem" }}>
                        <TempleateTitle title="系统功能使用占比" />
                        {
                            this.state.alluserdata.length == 0 ? <Empty /> : <EchartsDemo8 chartdata={{
                                xdata: ["巡更", "巡检", "值周", "道闸机", "烟感"],
                                all: this.state.alluserdata.length,
                                ydata: this.state.featuredata,
                                divId: "dfd"
                            }} />
                        }



                    </div> */}
                </div>
            </Spin>
        )
    }
}

const SystemUsedStatics = Form.create()(systemUsedStatics);


class ChartInnerTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            schoolId: props.schoolId,
            that: props.that,
            // chartData: []
            chartLoading:true
        };
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.schoolId) != JSON.stringify(this.state.schoolId)) {
            this.setState({
                schoolId: props.schoolId,
                that: props.that
            }, () => {
                this.drawChart();
            })
        }
    }

    componentDidMount() {
        this.drawChart();
    }

    drawChart() {
        this.setState({
            chartLoading:true 
        })
        getSchoolSystemGridInfoApi(parseInt(this.state.schoolId)).then(res => {
            this.setState({
                chartLoading:false 
            })
            let chart = echarts.init(document.getElementById('chartSearch' + this.state.schoolId));
            chart.setOption({
                title: {
                    text: '校内网格信息展示',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',
                        data: res.data,
                        top: '5%',
                        left: '10%',
                        bottom: '1%',
                        // right: '20%',
                        symbolSize: 9,
                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 15
                        },
                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },
                        emphasis: {
                            focus: 'descendant'
                        },
                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            })
            window.onresize = chart.resize;
        })

    }

    render() {
        let chartStyle = {
            marginBottom: 10,
            padding: 10,
            width: '100%',
            height: 800,
            border: '1px solid',
            borderColor: '#f5f5f5'
        };
        return (
            <Spin tip="网格信息正在查询中，请等待..." spinning={this.state.chartLoading}>
                <div id={'chartSearch' + this.state.schoolId} style={chartStyle} />
            </Spin>
        )
    }
}

class ChildrenInnerTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            // searchText: '',
            filteredInfo: null,
            sortedInfo: null,
            tableLoading: false,
            schoolId: props.schoolId,
            that: props.that,
            innerData: [],
            symbol: props.symbol,
            isMore: true,
            schoolName: props.schoolName,
            data1: [],
            userdata: [],
            useddepartment: [],
            nousedeoartment: [],
            alluserdata: [],
            allEduDepartment: [],
            featuredata: {
                patrol: 0,
                polling: 0,
                duty: 0,
                inout: 0,
                warning: 0
            },
        }
        //           this.lookCurrent=this.lookCurrent.bind(this)

        // this.lookMore=this.lookMore.bind(this)
        //console.log("props=======================", props)
    }


    componentDidMount() {
        this.lookCurrent()
        this.props.onRef(this);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.schoolId !== this.props.schoolId) {
            this.setState({
                schoolId: nextProps.schoolId,
                //index: nextProps.index
            }, () => {
                this.lookCurrent()
            });



        }

    }


    handleChange = () => {

    }

    toSchoolUrl(record) {
        getSchoolInfoByNameApi(record.name)
            .then((res) => {
                //console.log("ss", res.data)
                if (res.data == '') {
                    message.info('暂无进行大屏配置', 1);
                } else {
                    this.setState({
                        schoolUrl: screenUrl + screenath + parseInt(res.data.id) + "/" + res.data.name + '/' + 1 + '/' + res.data.moduleWatch + '/' + origin
                    })
                    // window.location.href= this.state.schoolUrl
                    window.open(this.state.schoolUrl)

                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }

    //天数
    GetNumberOfDays(date1, date2) {//获得天数
        //date1：开始日期，date2结束日期
        var a1 = Date.parse(new Date(date1));
        var a2 = Date.parse(new Date());
        var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数

        return day
    }

    lookCurrent() {

        console.log('lookCurrent执行了', this.state);

        this.setState({
            tableLoading: true
        });
        getChildrenSchoolInfoBySchoolIdApi(parseInt(this.state.schoolId))
            .then((res) => {

                let arr = [];
                if (res.data.length == 0) {
                    //message.info('暂无进行大屏配置', 1);
                    // console.log("数据为空=======")
                    this.setState({
                        data1: [],
                        tableLoading: false
                    })
                } else {

                    getLatelyInfoApi(parseInt(this.state.schoolId)).then(res => {
                        //console.log("res================", res.data);

                        let arr = [];
                        let nousedeoartment = []
                        let useddepartment = []
                        let featuredata = {
                            patrol: 0,
                            polling: 0,
                            duty: 0,
                            inout: 0,
                            warning: 0
                        }
                        res.data.getLatelyInfo.map((item, index) => {

                            if (item.patrolLatelyTime || item.inspectLatelyTime || item.inOrOutLatelyTime || item.dutyWeekLatelyTime || item.warnLatelyTime) {

                                if (item.patrolLatelyTime) ++featuredata.patrol


                                if (item.inspectLatelyTime) ++featuredata.polling
                                if (item.inOrOutLatelyTime) ++featuredata.duty
                                if (item.dutyWeekLatelyTime) ++featuredata.inout
                                if (item.warnLatelyTime) ++featuredata.warning
                                useddepartment.push({
                                    name1: item.name || "无",
                                    patrolLatelyTime1: item.patrolLatelyTime || -1,
                                    patrolusedays1: isNaN(this.GetNumberOfDays(item.patrolLatelyTime)) ? -1 : this.GetNumberOfDays(item.patrolLatelyTime),
                                    pollingusedays1: isNaN(this.GetNumberOfDays(item.inspectLatelyTime)) ? -1 : this.GetNumberOfDays(item.inspectLatelyTime),
                                    dutyusedays1: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? -1 : this.GetNumberOfDays(item.dutyWeekLatelyTime),
                                    inOrOutLatelyusedays1: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                                    inspectLatelyTime1: item.inspectLatelyTime || -1,
                                    dutyWeekLatelyTime1: item.dutyWeekLatelyTime || -1,
                                    inOrOutLatelyTime1: item.inOrOutLatelyTime || -1,
                                    warnLatelyTime1: item.warnLatelyTime || -1,
                                    id: item.id,
                                    key: index + 1,
                                })
                            }
                            else {
                                nousedeoartment.push({
                                    name: item.name || "无",

                                    id: item.id,
                                    key: index + 1,
                                    patrolLatelyTime1: item.patrolLatelyTime || -1,
                                    patrolusedays1: this.GetNumberOfDays(item.patrolLatelyTime) || -1,
                                    pollingusedays1: this.GetNumberOfDays(item.inspectLatelyTime) || -1,
                                    dutyusedays1: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? this.GetNumberOfDays(item.dutyWeekLatelyTime) : -1,
                                    inOrOutLatelyusedays1: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                                    inspectLatelyTime1: item.inspectLatelyTime || -1,
                                    dutyWeekLatelyTime1: item.dutyWeekLatelyTime || -1,
                                    inOrOutLatelyTime1: item.inOrOutLatelyTime || -1,
                                    warnLatelyTime1: item.warnLatelyTime || -1
                                })
                            }
                            arr.push(
                                {
                                    name1: item.name || "无",
                                    patrolLatelyTime1: item.patrolLatelyTime || -1,
                                    patrolusedays1: this.GetNumberOfDays(item.patrolLatelyTime) || -1,
                                    pollingusedays1: this.GetNumberOfDays(item.inspectLatelyTime) || -1,
                                    dutyusedays1: isNaN(this.GetNumberOfDays(item.dutyWeekLatelyTime)) ? this.GetNumberOfDays(item.dutyWeekLatelyTime) : -1,
                                    inOrOutLatelyusedays1: isNaN(this.GetNumberOfDays(item.inOrOutLatelyTime)) ? this.GetNumberOfDays(item.inOrOutLatelyTime) : -1,
                                    inspectLatelyTime1: item.inspectLatelyTime || -1,
                                    dutyWeekLatelyTime1: item.dutyWeekLatelyTime || -1,
                                    inOrOutLatelyTime1: item.inOrOutLatelyTime || -1,
                                    warnLatelyTime1: item.warnLatelyTime || -1,
                                    id: item.id,
                                    key: index + 1,
                                }
                            )
                        }
                        )

                        this.setState({
                            useddepartment: useddepartment,
                            nousedeoartment: nousedeoartment,
                            alluserdata: arr,
                            userdata: useddepartment,
                            tableLoading: false,
                            featuredata: featuredata
                        })


                    })
                        .catch(e => {
                            if (e.response) {
                                //请求已发出，服务器返回状态码不是2xx。
                                console.info(e.response.data);
                                console.info(e.response.status);
                                console.info(e.response.headers);
                            } else if (e.request) {
                                // 请求已发出，但没有收到响应
                                // e.request 在浏览器里是一个XMLHttpRequest实例，
                                // 在node中是一个http.ClientRequest实例
                                console.info(e.request);
                            } else {
                                //发送请求时异常，捕捉到错误
                                console.info("error", e.message);
                            }
                            console.info(e.config);
                        });



                    // this.setState({
                    //     //data1: arr,
                    //     tableLoading: false
                    // })
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
    }


    render() {

        const menu = (
            <Menu>
                <Menu.Item>Action 1</Menu.Item>
                <Menu.Item>Action 2</Menu.Item>
            </Menu>
        );

        const columns = [
            {
                title: '学校名称',
                dataIndex: 'name1',
                key: 'name1',
            },
            {
                title: '最近一次巡更',
                dataIndex: 'patrolLatelyTime1',
                key: 'patrolLatelyTime1',
                sorter: (a, b) => a.patrolusedays1 - b.patrolusedays1,
                defaultSortOrder: 'descend',
                sortDirections: ['descend', 'ascend'],
                render: (text, record) => {
                    let error = <Tag color="grey">未使用</Tag>

                    let correct = <Badge count={record.patrolusedays1 == -1 || record.patrolusedays1 == 0 ? 0 : (record.patrolusedays1 + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
                        {
                            record.patrolusedays1 < 3 && record.patrolusedays1 > -1 ? <Tag color="green">

                                {text}</Tag> : <Tag color="red">{text}</Tag>
                        }
                    </div></Badge>
                    return (
                        text == -1 ? error : correct
                    )
                }
            },

            {
                title: '最近一次巡检',
                dataIndex: 'inspectLatelyTime1',
                key: 'inspectLatelyTime1',
                sorter: (a, b) => a.pollingusedays1 - b.pollingusedays1,

                sortDirections: ['descend', 'ascend'],
                render: (text, record) => {
                    let error = <Tag color="grey">未使用</Tag>
                    let correct = <Badge count={record.pollingusedays1 == -1 || record.pollingusedays1 == 0 ? 0 : (record.pollingusedays1 + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
                        {
                            record.pollingusedays1 < 15 && record.pollingusedays1 >= 0 ? <Tag color="green">

                                {text}</Tag> : <Tag color="red">{text}</Tag>
                        }
                    </div></Badge>
                    return (

                        text == -1 ? error : correct

                    )
                }
            },
            {
                title: '最近一次值周',
                dataIndex: 'dutyWeekLatelyTime1',
                sorter: (a, b) => a.dutyusedays1 - b.dutyusedays1,

                sortDirections: ['descend', 'ascend'],
                key: 'dutyWeekLatelyTime1',
                render: (text, record) => {
                    let error = <Tag color="grey">未使用</Tag>
                    let correct = <Badge count={record.dutyusedays1 == -1 || record.dutyusedays1 == 0 ? 0 : (record.dutyusedays1 + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
                        {
                            record.dutyusedays1 < 3 && record.dutyusedays1 >= 0 ? <Tag color="green">

                                {text}</Tag> : <Tag color="red">{text}</Tag>
                        }
                    </div></Badge>
                    return (
                        text == -1 ? error : correct
                    )
                }
            },
            {
                title: '最近一次考勤',
                dataIndex: 'inOrOutLatelyTime1',
                sorter: (a, b) => a.inOrOutLatelyusedays1 - b.inOrOutLatelyusedays1,

                sortDirections: ['descend', 'ascend'],
                key: 'inOrOutLatelyTime1',
                render: (text, record) => {
                    let error = <Tag color="grey">未使用</Tag>
                    let correct = <Badge count={record.inOrOutLatelyusedays1 == -1 ? 0 : (record.inOrOutLatelyusedays1 + '天前')} ><div style={{ height: '34px', lineHeight: '34px' }}>
                        {
                            record.inOrOutLatelyusedays1 < 3 && record.inOrOutLatelyusedays1 >= 0 ? <Tag color="green">

                                {text}</Tag> : <Tag color="red">{text}</Tag>
                        }
                    </div></Badge>
                    return (
                        text == -1 ? error : correct
                    )
                }
            },
            // {
            //     title: '最近一次报警',
            //     dataIndex: 'warnLatelyTime1',
            //     key: 'warnLatelyTime1',
            //     render: (text, record) => {
            //         let error = <Tag color="grey">未使用</Tag>
            //         let correct = <Tag color="blue">{text}</Tag>
            //         return (
            //             text == -1 ? error : correct
            //         )
            //     }
            // },

            {
                title: '操作详情',
                dataIndex: 'action1',
                key: 'action1',
                render: (text, record) => {
                    return (
                        <span>
                            <a
                                href="javascript:;"
                                onClick={this.toSchoolUrl.bind(this, record)}
                            >
                                查看详情
                            </a>
                            {/* <Button onClick={this.toSchoolUrl.bind(this, record)}> 查看详情</Button> */}
                        </span>
                    )
                }
            },
        ];

        return (

            <Table columns={columns} loading={this.state.tableLoading} dataSource={this.state.alluserdata} pagination={false} defaultExpandAllRows />
        )
    }
}

function Total(props) {


    return (



        <div className="totalFlexBox">


            <div className="totalFlextItem" >
                <div className="totalNumber">{props.data.all}</div>

                <div>

                    <div>学校总数</div>
                </div>

            </div>

            <div className="totalFlextItem" >
                <div className="totalNumber">{props.data.inspectUsed}</div>

                <div>

                    <div>巡检已使用学校数</div>
                </div>

            </div>
            <div className="totalFlextItem" >
                <div className="totalNumber">{props.data.patrolUsed}</div>

                <div>

                    <div>巡更已使用学校数</div>
                </div>

            </div>
            <div className="totalFlextItem" >
                <div className="totalNumber">{props.data.noused}
                </div>

                <div>

                    <div>未使用学校数</div>
                </div>

            </div>


            <div className="totalFlextItem" >
                <div className="totalNumber">{((props.data.used / props.data.all) * 100).toFixed(0)}%</div>

                <div>

                    <div>系统使用率</div>
                </div>

            </div>
            {/* <div className="totalFlextItem" >
                <div className="totalNumber">155 </div>

                <div>

                    <div>人脸识别机总数</div>
                </div>

            </div> */}





        </div>
    )

}
//模块标题
function TempleateTitle(props) {


    return (
        <div className='SystemUsedStatics_templeate_title'>{props.title}</div>
    )
}



class EchartsDemo7 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            divId: props.chartdata.divId,
            xdata: props.chartdata.xdata || [],
            ydata: props.chartdata.ydata || []

        }
    }

    componentWillReceiveProps(props) {

        //this.refreshdata();
        setInterval(this.refreshdata(), 2000);

    }

    componentDidMount() {
        //  this.refreshdata()
        //  setInterval(this.refreshdata(), 2000);
    }

    refreshdata() {

        if (this.state.xdata.length) {
            var myChart = echarts.init(document.getElementById(this.state.divId));

            // 指定图表的配置项和数据
            myChart.setOption({
                color: ['#3398DB'],
                title: {
                    //   text: '计划巡检次数排名',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        name: "功能",
                        data: this.state.xdata,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            textStyle: {
                                fontSize: 19
                            },
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: "学校数",
                        axisLabel: {
                            textStyle: {
                                fontSize: 19
                            },
                        }
                    }
                ],
                series: [
                    {
                        name: '学校数',
                        type: 'bar',
                        barWidth: 30,
                        barMaxWidth: 30,
                        animation: false,
                        data: this.state.ydata,
                        itemStyle:
                        {
                            normal: {
                                label: {
                                    show: true, //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: { //数值样式
                                        color: 'black',
                                        fontSize: 19
                                    }
                                }
                            }
                        },
                    }
                ]
            })

        }
    }
    render() {

        return (

            <div id={this.state.divId} style={chartStyle} className="imgs2" />

        )
    }
}



class EchartsDemo8 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            divId: props.chartdata.divId,
            xdata: props.chartdata.xdata || [],
            all: props.chartdata.all || 0,
            ydata: props.chartdata.ydata || []

        }
    }

    componentWillReceiveProps(props) {
        this.setState({
            divId: props.chartdata.divId,
            xdata: props.chartdata.xdata || [],
            all: props.chartdata.all || 0,
            ydata: props.chartdata.ydata || []
        })

        // this.refreshdata();
        // setInterval(this.refreshdata(), 2000);

    }

    componentDidMount() {
        this.refreshdata()
        //  setInterval(this.refreshdata(), 2000);
    }
    componentDidUpdate() {
        this.refreshdata()
    }

    refreshdata() {


        if (this.state.xdata.length) {
            var myChart = echarts.init(document.getElementById(this.state.divId));
            var data = [

                {
                    name: '巡更',
                    value: ((this.state.ydata.patrol / this.state.all) * 100).toFixed(0)
                }, {
                    name: '巡检',
                    value: ((this.state.ydata.polling / this.state.all) * 100).toFixed(0)
                }, {
                    name: '值周',
                    value: ((this.state.ydata.duty / this.state.all) * 100).toFixed(0)
                }, {
                    name: '考勤',
                    value: ((this.state.ydata.inout / this.state.all) * 100).toFixed(0)
                }
                // }, {
                //     name: '烟感',
                //     value: ((this.state.ydata.warning / this.state.all) * 100).toFixed(0)
                // }
            ]

            var titleArr = [], seriesArr = [];
            let colors = [['#389af4', '#dfeaff'], ['#ff8c37', '#ffdcc3'], ['#ffc257', '#ffedcc'], ['#fd6f97', '#fed4e0'], ['#a181fc', '#e3d9fe']]
            data.forEach(function (item, index) {
                titleArr.push(
                    {
                        text: item.name,
                        left: index * 20 + 10 + '%',
                        top: '75%',
                        textAlign: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: '16',
                            color: colors[index][0],
                            textAlign: 'center',
                        },
                    }
                );
                seriesArr.push(
                    {
                        name: item.name,
                        type: 'pie',
                        clockWise: false,
                        radius: [60, 70],
                        itemStyle: {
                            normal: {
                                color: colors[index][0],
                                shadowColor: colors[index][0],
                                shadowBlur: 0,
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                            }
                        },
                        hoverAnimation: false,
                        center: [index * 20 + 10 + '%', '50%'],
                        data: [{
                            value: item.value,
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value + '%';
                                    },
                                    position: 'center',
                                    show: true,
                                    textStyle: {
                                        fontSize: '20',
                                        fontWeight: 'bold',
                                        color: colors[index][0]
                                    }
                                }
                            },
                        }, {
                            value: 100 - item.value,
                            name: 'invisible',
                            itemStyle: {
                                normal: {
                                    color: colors[index][1]
                                },
                                emphasis: {
                                    color: colors[index][1]
                                }
                            }
                        }]
                    }
                )
            });

            var option = {
                backgroundColor: "#fff",
                title: titleArr,
                series: seriesArr
            }
            // 指定图表的配置项和数据
            myChart.setOption(option)

        }
    }
    render() {

        return (

            <div id={this.state.divId} style={chartStyle} className="imgs2" />

        )
    }
}

export default EdudepartmentAdmin;
export { EduDepartmentUserManager, EduDepartmentSchoolManager, EduDepartmentEduManager, EduSchoolblueteeth, Featuresset, FeaturesitemOfAdmin, SystemUsedStatics };
